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

我是JS和Jquery的新手。
我需要显示从json服务器返回的结果。我有一个json数组，其结果可以通过data [“json”]变量访问。如何使用jQuery来解析json并将其输出为HTML列表？

数组中的每个结果都有一个链接和标题。
我希望能够在一行中显示每一对作为HTML中某些列表的一部分。结构应该是这样的：

标题：[标题]链接：URL
标题：[标题]链接：URL等。

我已经使用没有成功以下JS函数试图

（从here把它）我觉得我没理解函数currectly因此：
如果您也可以解释我的部分的含义的$（“名单> UL）和函数的部分（索引，元素）=>什么是指标和元素得到的值，为什么

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('\n'); 
      $(".list > ul").append(itemHTML); 
     } 
     }

例JSON结果，客户端应该处理。？

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

来源

2015-04-04 JavaSa

使用以下代码。检查工作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('\n'); 
     $(".list > ul").append(itemHTML); 
    }); 
} 

DisplayListItems(list)

来源

2015-04-04 12:58:51

我试着做一些不同的事情，而不是element.link我想使用，我想把element.title放在图片旁边 - 没有换一行。我试图这样做，但没有出现任何图像，请给我举个例子吗？ – JavaSa 2015-04-04 14:58:00

@JavaSa你能告诉我你尝试过什么吗？小提琴？ – 2015-04-04 16:06:54

当然看这里：http：//stackoverflow.com/questions/29449076/displaying-linkeable-search-result-alignment – JavaSa 2015-04-04 16:58:46

jQuery.parseJSON是一个函数，它接受一个字符串作为输入，并给出一个Javascript对象/阵列作为输出。例如：

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

所以，你应该叫parseJSON名单上的你迭代它之前。

.list > ul

是一个选择，在普通的人类语言可能被解读为：

所有的UI元素，而它们恰巧是任何元素，它们具有类列表中的孩子。

简而言之，选择器是逻辑的扩展，它决定了在给定的情况下应该选择哪些元素。

来源

2015-04-04 13:20:08

让我解释一下。如果你有字符串格式的json数组，那么你需要$ .parseJSON函数。否则不需要使用。你也不需要使用list ['json'] .as在你的json数组中没有像'json'这样的键， – 2015-04-04 14:20:35

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

回答

相关问题