如何使用javascript / jquery从嵌套列表生成嵌套的json对象

我想生成以下对象：

var ideaBoard = { "Staff Retreat" : { "Games" : [ {"title" : "Rockband", "details" : "1hr"}, {"title" : "Texas Hold em", "details" : "30min"} ], "Talks" : [ {"title" : "The Old You", "details" : "Dr. Smith"} ] } } 

来自以下HTML：

 
 
Staff Retreat 
Games 
 
 Rockband 1hr 
 
 Texas Hold em 30min 
 
 
 
Talks 
 
 The Old You Dr. Smith 
 
 
 
  

我是循环/数组/对象的新手 – 所以我真的很感激帮助！

我在这个项目的其他地方使用jQuery，如果有帮助的话。

谢谢！

Answer 1

有多种方式。 这是一个：

 var ideaBoard = {} $('#data > ul').each(function() { var data = {}, // board data title = $(this).find('.board-title').text(); // board title // find categories $(this).find('> li > .category-title').each(function() { var category = $(this).text(), // category title // we can use map to create the array var category_data = $(this).next().children('li').map(function() { var tdata = {}; // each span contains detailed data $(this).children('span').each(function() { tdata[this.className] = $(this).text(); }); return tdata; }).get(); data[category] = category_data; }); ideaBoard[title] = data; }); 

DEMO

如果更改HTML的结构，这很可能会中断。 如果你有这么多的数据，这段代码也可能很慢。

要了解所使用的方法，请查看jQuery文档 。

Answer 2

它没有优化，但它的工作原理：

 var result = {}; var node1; var node2; var node3; var tmpObj = {}; $('#data > ul').each(function() { node1 = $(this); result[node1.find('.board-title').text()] = {}; node1.find('.category-title').each(function() { node2 = $(this); result[node1.find('.board-title').text()][node2.text()] = []; node2.next('ul').children('li').each(function() { node3 = $(this); tmpObj = {}; node3.children('span').each(function() { tmpObj[$(this).attr('class')] = $(this).text(); }); result[node1.find('.board-title').text()][node2.text()].push(tmpObj); }) }); }); console.log(result); 

Answer 3

你是如何生成HTML的？ 如果您使用PHP，您可以将变量传递给JS，而不是稍后尝试从HTML中读取它们。 例如，如果你在数组中有它们，可以在PHP中使用json_encode，然后在你的页面中回显变量= jQuery.parseJSON（这里）;

现在，如果你不能这样做，并且你真的想从HTML中读取它，那么你应该先用$（’＃data’）选择id数据并取其子（）。 然后为孩子们使用.each（）。 然后将子项放到object中，然后使用.each（）检查每个children（）并将它们添加到对象中。 如果你可能不仅仅是那些级别，我建议你做一个递归函数。

PS：我不认为在UL和LI之间放置Span的正确HTML。