dongqing6755
2015-04-04 12:52
浏览 73

如何使用jQuery解析json并将其作为列表输出到HTML中?

I'm new to JS and Jquery.
I need to show result which are return from the server in json. I have a json array with the result which can be accessed through data["json"] variable.

Each result in array has a link and title.
I want to be able to show each pair on a single line as a part of some list in the HTML. Structure should be like:

title: [title] , link: URL
title: [title] , link: URL and so on.

I've tried using the following JS function without success( took it from here )

I think I didn't understood the function currectly therefore:
If you can also explain me the meaning of the part of the $.("list >ul) and the section of function(index, element) => what are the values the index and element getting and why?

 function DisplayListItems(list) {
        alert("in display:" + list["json"]);
        $.each(list["json"], function(index, element) {
            var itemHTML = ["<li>",
                        "<div>",
                        "<div>",
                            element.link,
                        "</div>",
                        "<div>",
                            element.title,
                        "</div>",                                    
                        "</div>",
                    "</li>"].join('
');
            $(".list > ul").append(itemHTML);
        }
        }

Example Json result which the client should handle:

[{"link":"http:\/\/en.wikipedia.org\/wiki\/Balloon","title":"Balloon - Wikipedia, the free encyclopedia"},{"link":"http:\/\/www.balloons.com\/","title":"Balloons.com - Wholesale Balloon Distributor"},{"link":"http:\/\/www.partycity.com\/category\/balloons.do","title":"Party Balloons, Helium Balloons & Balloon Accessories - Party City"},{"link":"http:\/\/clashofclans.wikia.com\/wiki\/Balloon","title":"Balloon - Clash of Clans Wiki"},{"link":"http:\/\/www.balloon-juice.com\/","title":"Balloon Juice"},{"link":"http:\/\/www.balloonfiesta.com\/","title":"The Albuquerque International Balloon Fiesta - Welcome to the ..."},{"link":"http:\/\/www.youtube.com\/watch?v=belCJJjut1A","title":"\"The Balloon Show\" for learning colors -- children's educational video"},{"link":"http:\/\/www.google.com\/loon\/","title":"Loon for All \u2013 Project Loon \u2013 Google"},{"link":"http:\/\/www.youtube.com\/watch?v=khsXGETCqVw","title":"\"Pretty Balloons\" (balloon song for learning colors) - YouTube"},{"link":"http:\/\/www.balloon-app.com\/","title":"Balloon"}]
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongqiu3709 2015-04-04 12:58
    已采纳

    use below code . check working DEMO

      var list = [{"link":"http:\/\/en.wikipedia.org\/wiki\/Balloon","title":"Balloon - Wikipedia, the free encyclopedia"},{"link":"http:\/\/www.balloons.com\/","title":"Balloons.com - Wholesale Balloon Distributor"},{"link":"http:\/\/www.partycity.com\/category\/balloons.do","title":"Party Balloons, Helium Balloons & Balloon Accessories - Party City"},{"link":"http:\/\/clashofclans.wikia.com\/wiki\/Balloon","title":"Balloon - Clash of Clans Wiki"},{"link":"http:\/\/www.balloon-juice.com\/","title":"Balloon Juice"},{"link":"http:\/\/www.balloonfiesta.com\/","title":"The Albuquerque International Balloon Fiesta - Welcome to the ..."},{"link":"http:\/\/www.youtube.com\/watch?v=belCJJjut1A","title":"\"The Balloon Show\" for learning colors -- children's educational video"},{"link":"http:\/\/www.google.com\/loon\/","title":"Loon for All \u2013 Project Loon \u2013 Google"},{"link":"http:\/\/www.youtube.com\/watch?v=khsXGETCqVw","title":"\"Pretty Balloons\" (balloon song for learning colors) - YouTube"},{"link":"http:\/\/www.balloon-app.com\/","title":"Balloon"}]
    
     function DisplayListItems(list) {
      $.each(list, function(index, element) {
       var itemHTML = ["<li>",
                        "<div>",
                        "<div>",
                            element.link,
                        "</div>",
                        "<div>",
                            element.title,
                        "</div>",                                    
                        "</div>",
                    "</li>"].join('
    ');
            $(".list > ul").append(itemHTML);
      });
     }
    
     DisplayListItems(list)
    
    点赞 打赏 评论
  • dra11767 2015-04-04 13:20

    jQuery.parseJSON is a function which takes a string as input and gives a Javascript object/array as output. Example:

    var obj = jQuery.parseJSON(list["json"]);
    console.log(obj);
    

    So you should call parseJSON on your list before you iterate it.

    .list > ul
    

    is a selector, in plain human language it could be read as:

    All the ul elements, which happen to be the children of any elements, which have the class of list.

    Simply put, selectors are logical experssions which determine what elements should be selected in a given case.

    点赞 打赏 评论

相关推荐 更多相似问题