</div>
</div>
</div>
<hr class="my12 outline-none baw0 bb bc-powder-2">
<div class="grid fw-nowrap fc-black-600">
<div class="grid--cell mr8">
<svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
</div>
<div class="grid--cell lh-md">
<p class="mb0">
<b>Want to improve this question?</b> <a href="/posts/24770101/edit">Update the question</a> so it's <a href="/help/on-topic">on-topic</a> for Stack Overflow.
</p>
<p class="mb0 mt6">Closed <span title="2014-07-16 04:12:13Z" class="relativetime">5 years ago</span>.</p>
</div>
</div>
</aside>
I am having trouble handling a JSONP response to an ajax call to a website. My intention is to have the the results (url's) of the news items displayed on a page so when a user clicks on each link, he or she would be directed to the page containing the story. However, that is not happening.
Though I was able to display the result as an unordered list. Instead when I click on the links, I get directed to a local folder with a file not found message.
Here is my code:
$(document).ready(function(){
$.ajax({
url:"http://api.nytimes.com/svc/news/v3/content/all/all/.jsonp",
data: {"api-key":"uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu"},
dataType: 'jsonp',
type: 'GET',
success:function(mydata){
$.each(mydata.results, function(i, value){
$("ul").append('<li>'+'<a href="">'+mydata.results[i].url+'</a>'+ '</li>');
$("ul li a").attr("href", "mydata.results[i].url");
});
//alert("Success");
},
error:function(){
alert("Error");
},
});
});
</div>
replacing your code by this probably will help
$.each(mydata.results, function(i, value){
$("ul").append('<li>'
+'<a href="'+mydata.results[i].url+'">'+mydata.results[i].url+'</a>'
+ '</li>');
});
things you are doing wrong
1. changing href value of every a for each iteration of the loop.
2. setting string value ("mydata.results[i].url") in the href instead ofmydata.results[i].url