使用JS(jQuery)从JSON对象创建无序列表

时间:2012-10-22 17:12:58

标签: javascript ajax jquery

我想在下面的代码中使用jQuery .each()为JSON entry对象创建一个无序列表

$(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);
        }
    });
});

我想单独用JavaScript(jQuery)来实现这个目标

1 个答案:

答案 0 :(得分:3)

在您的AJAX请求中将JSONP设置为数据类型,并将friendFeed指定为回调函数。

在成功回调函数中,您可以直接从JSON数据构建无序列表。只需遍历要使用的对象,并将li元素附加到ul元素。例如:

$.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
    }
});