Create unordered list from JSON object using JS (jQuery)

Question

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.com/v1/public/yql?q=SELECT%20title%2C%20description%2C%20link%2C%20pubDate%0AFROM%20feed(0%2C5)%0AWHERE%20url%3D'http%3A%2F%2Ffeeds.feedburner.com%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'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
– 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
– VeXii, Commented Oct 22, 2012 at 18:05

Aletheios · Accepted Answer · 2012-10-22 18:22:11Z

4

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.com/v1/public/yql?q=SELECT%20title%2C%20description%2C%20link%2C%20pubDate%0AFROM%20feed(0%2C5)%0AWHERE%20url%3D'http%3A%2F%2Ffeeds.feedburner.com%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
    }
});

edited Oct 22, 2012 at 18:22

answered Oct 22, 2012 at 18:14

Aletheios

4,0202 gold badges36 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ruan Mendes Over a year ago

You don't have to specify a callback, jQuery sets it automatically if you remove it from the url jsfiddle.net/wAvRk/1

Aletheios Over a year ago

@Juan Mendes: Thanks for the hint! I added the callback here because I didn't want to change the URL given in the question (might have been confusing).

Collectives™ on Stack Overflow

Create unordered list from JSON object using JS (jQuery)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related