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

Question

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"}]

Answer 1

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)