Content not displaying parsed JQuery

60 views
Skip to first unread message

Scott Herzig

unread,
Jun 14, 2016, 10:32:07 AM6/14/16
to Guardian Open Platform API Forum
Hello,

I realize this isn't specifically a Guardian API question - it is more of a JQuery question.  I have tested the stand-alone URL and it works fine - it returns the items in my browser when I navigate directly to the URL.  My page below will display 10 list items with nothing but my labels.  The iteration of ten items means it is seeing the ten stories in the query, but for some reason my syntax is wrong and I am not getting the content at all.  

Thanks for looking and any advice you're willing to give.

Best,
-SH

<!DOCTYPE html>
<html>
<head>
<script>
$.ajax({
 dataType: 'xml',
    success: function(usnews){
  $(usnews).find('result').each(function() {
   var strTitle = $(this).find('web-title').text();
   var vurl = $(this).find('web-url').text();
   var vpubdate = $(this).find('web-publication-date').text();
   
   $('.newsitem ul').append(
    $('<li />', {
     text: 'Article: ' + strTitle
    })
   );
   $('.newsitem ul').append(
    $('<li />', {
     text: 'URL: ' + vurl
    })
   );   
   $('.newsitem ul').append(
    $('<li />', {
     text: 'Date: ' + vpubdate
    })
   );
  });
  
 },
    error: function() {
      $(".newsitem").html('<p>Error: ' + error + '</p>');
    }
});
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
  <tr>
    <td>Guardian</td>
  </tr>
  
  <tr>
    <td><div class="newsitem"><ul><!-- News Content--></ul></div></td>
  </tr>
  
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

Grant Klopper

unread,
Jun 15, 2016, 1:11:49 AM6/15/16
to Guardian API Talk
Hi


You are right it is probably your jQuery parsing that is failing. You would probably be better off working in Json than XML as it effectively returns you a Javascript object you can just use.


I have rewritten this for you to using Json instead and it works (just remember to substitute your own API key in)


Grant

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
    <tr>
        <td>Guardian</td>
    </tr>

    <tr>
        <td>
            <div class="newsitem">
                <ul><!-- News Content--></ul>
            </div>
        </td>
    </tr>

    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>


<script>
    $.ajax({
        url: 'http://content.guardianapis.com/search?section=us-news&api-key=xxxxxxx&format=json',
        dataType: 'json',
        success: function (usnews) {
            var results = usnews.response.results;
            $(results).each(function(index){
                var content = results[index];

                
                $('.newsitem ul').append(
                        $('<li />', {
                            text: 'Article: ' + content.webTitle

                        })
                );
                $('.newsitem ul').append(
                        $('<li />', {
                            text: 'URL: ' + content.webUrl

                        })
                );
                $('.newsitem ul').append(
                        $('<li />', {
                            text: 'Date: ' + content.webPublicationDate

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

</body>
</html>






-- 

You received this message because you are subscribed to the Google Groups "Guardian Open Platform API Forum" group.

To unsubscribe from this group and stop receiving emails from it, send an email to guardian-api-t...@googlegroups.com.

To post to this group, send email to guardian...@googlegroups.com.

Visit this group at https://groups.google.com/group/guardian-api-talk.

For more options, visit https://groups.google.com/d/optout.





Reply all
Reply to author
Forward
0 new messages