SAH SAH - 5 months ago 13
HTML Question

JQuery AJAX Content not Displaying

I am pretty new to JQuery/Ajax; this really is just my second project, and is my first post here. I've looked around here quite a bit and am just not coming up with the answer. The format of the syntax below is similar to what I am successfully using with the Wunderground API. I assumed this would follow a similar solution. I am calling out to The Guardian Public API this time. I can tell data is being returned because when I add #newsitem to my html doc, I see ten iterations of my labels Article, URL and Date, but there is no content showing in my DIV. I can also see the content when I Inspect in the browser tools.

I am sure I am searching the result array incorrectly or my syntax isn't right. I didn't post the HTML, but yes, I loaded the JQuery module.

Any help is appreciated. Sorry if this is a repost - I have looked at every "similar questions" link in the sidebar; hopefully this is easy enough.

$.ajax({
url: 'http://content.guardianapis.com/search?section=us-news&api-key=xxxxx&format=xml',
dataType: 'xml',
success: function(mynews){
$(mynews).find('response results result').each(function() {
var strTitle = $(this).find('web-title').text();
var strUrl = $(this).find('web-url').text();
var strPubdate = $(this).find('web-publication-date').text();

$('#newsitem ul').append(
$('<li />', {
text: 'Article: ' + strTitle
})
);
$('#newsitem ul').append(
$('<li />', {
text: 'URL: ' + strUrl
})
);
$('#newsitem ul').append(
$('<li />', {
text: 'Date: ' + strPubdate
})
);
});

},
error: function() {
$(".newsitem").html('<p>Error: ' + error + '</p>');
}
});


Display Page:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guardian News</title>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="guardiannews.js"></script>
<style type="text/css">
.newsitem li{
font-family: Verdana, sans-serif;
font-size: small;
}
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td>Guardian News</td>
</tr>
<tr>
<td><div id="newsitem"><ul><!-- News Content--></ul></div></td>
</tr>
</table>
</body>
</html>


Here is some sample output from the API.

<response status="ok" user-tier="developer" total="30070" current-page="1" pages="15035" start-index="1" page-size="2" order-by="newest">
<results>
<result web-url="https://www.theguardian.com/us-news/2016/jun/14/orlando-shooting-omar-mateen-motive-pulse-nightclub" type="article" section-id="us-news" web-title="FBI to investigate if Orlando gunman's sexuality was a motive in shooting" api-url="https://content.guardianapis.com/us-news/2016/jun/14/orlando-shooting-omar-mateen-motive-pulse-nightclub" section-name="US news" web-publication-date="2016-06-14T19:23:16Z" id="us-news/2016/jun/14/orlando-shooting-omar-mateen-motive-pulse-nightclub"/>
<result web-url="https://www.theguardian.com/us-news/2016/jun/14/donald-trump-muslim-americans-syrian-refugees-fact-check" type="article" section-id="us-news" web-title="Fact-checking Donald Trump's speech in the wake of the Orlando terror attack" api-url="https://content.guardianapis.com/us-news/2016/jun/14/donald-trump-muslim-americans-syrian-refugees-fact-check" section-name="US news" web-publication-date="2016-06-14T19:19:17Z" id="us-news/2016/jun/14/donald-trump-muslim-americans-syrian-refugees-fact-check"/>
</results>
</response>

Answer

Having had a look at the API in question, the requested values are merely attributes of the element node.

You can access these attributes directly using attr(), as opposed to your usage of find(), like so:

var strTitle = $(this).attr('web-title'),
    strUrl = $(this).attr('web-url'),
    strPubdate = $(this).attr('web-publication-date');

Here's a fiddle.