I would like to create an unordered list using jQuery .each() for the JSON entry object in the code below

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "(0%2C5)%0AWHERE%20url%3D'http%3A%2F%2Ffeeds.feedburner%2FffAggregator'&format=json&diagnostics=true&callback=friendFeed",
        data: { get_param: 'value' },
        success: function (data) {
            var names = data

            $('#results').html(data);
        }
    });
});

I would like to achieve this with JavaScript (jQuery) alone

I would like to create an unordered list using jQuery .each() for the JSON entry object in the code below

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "http://query.yahooapis./v1/public/yql?q=SELECT%20title%2C%20description%2C%20link%2C%20pubDate%0AFROM%20feed(0%2C5)%0AWHERE%20url%3D'http%3A%2F%2Ffeeds.feedburner.%2FffAggregator'&format=json&diagnostics=true&callback=friendFeed",
        data: { get_param: 'value' },
        success: function (data) {
            var names = data

            $('#results').html(data);
        }
    });
});

I would like to achieve this with JavaScript (jQuery) alone

• javascript
• ajax
• jquery

• Too easy a question for you not to show any attempt. – Ruan Mendes Commented Oct 22, 2012 at 17:35
• I've updated the code to the furthest that I got. Sorry for not including it earlier. This displays the JSON string on the screen for which I would like to make into an unordered list – Al Augustin Commented Oct 22, 2012 at 18:02
• i dont know the yahoo api but i looks like you are reciving a JSON object nested in a function call. do you have a function called friendFeed? and do that not return the data as JSON? – VeXii Commented Oct 22, 2012 at 18:05
• 1 @VeXii That's called JSONP, it's working fine – Ruan Mendes Commented Oct 22, 2012 at 18:07

1 Answer 1

Set JSONP as data type in your AJAX request and specifiy friendFeed as callback function.

In the success callback function, you can then build the unordered list directly from the JSON data. Just iterate over the object you want to use and append li elements to a ul element. Example:

$.ajax({
    type: "GET",
    url: "http://query.yahooapis./v1/public/yql?q=SELECT%20title%2C%20description%2C%20link%2C%20pubDate%0AFROM%20feed(0%2C5)%0AWHERE%20url%3D'http%3A%2F%2Ffeeds.feedburner.%2FffAggregator'&format=json&diagnostics=true&callback=friendFeed",
    data: { get_param: 'value' },
    jsonpCallback: 'friendFeed',
    dataType: "jsonp",
    success: function (data) {
        var obj = data.query.results.entry,  // get entry object (array) from JSON data
            ul = $("<ul>");                    // create a new ul element
        // iterate over the array and build the list
        for (var i = 0, l = obj.length; i < l; ++i) {
            ul.append("<li><a href='" + obj[i].link.href + "'>" + obj[i].title.content + "</a></li>");
        }
        $("#results").append(ul);    // add the list to the DOM
    }
});