Parse this JSON file using JQuery

Question

This is the JSON I found whilst trawling the BBCs API site

http://cdnedge.bbc.co.uk/nol/ukfs%5Fnews/hi/front%5Fpage/ticker.json

I'd like to turn these entries into an ordered list in the form of

<div id="news">
    <ul>
    <li><a href="'http://news.bbc.co.uk'+ entries.url +"><span class="+isBreaking+" entries.headline</span></a></li>
    <li>...repeat for each entry</li>
    </ul> </div>

I've read through a lot of tutorials but I can't figure out where my variables match up in the tuts, if someone would be so kind as to point out my failings below that would be great.

This is my script below, and yes I have attached jquery-1.3.2.min.js above this :D

This version does not include the Anchor / SPAN that I would like but they aren't important, as its for a digital signage project i'm working on whilst on work experience.

<script>
    $(document).ready( function() {

     var url = "http://cdnedge.bbc.co.uk/nol/ukfs_news/hi/front_page/ticker.json?count=3&amp;callback=?";
     $.getJSON(url, function(entries){
      $.each(entries, function(i, item) {
       $("#news ul").append("<li>" + item.headline + "</li>");
      });
        });
    });

</script>

Cheers

Answer 1

The problem is that you have a root level element above the entries. By setting the return call to be function(entries), you imply that the JSON returns only the entries parameter, which isn't true. You can fix this by modifying the argument passed to the callback function and accessing the entities collection from there, like so:

<script>
    $(document).ready( function() {

        var url = "http://cdnedge.bbc.co.uk/nol/ukfs_news/hi/front_page/ticker.json?count=3&amp;callback=?";
        $.getJSON(url, function(data){
               $.each(data.entries, function(i, item) {
                       $("#news ul").append("<li>" + item.headline + "</li>");
                });
        });
    });

</script>