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>
Aucun commentaire:
Enregistrer un commentaire