我想生成以下对象:
var ideaBoard = {
"Staff Retreat" : {
"Games" : [
{"title" : "Rockband", "details" : "1hr"},
{"title" : "Texas Hold em", "details" : "30min"}
],
"Talks" : [
{"title" : "The Old You", "details" : "Dr. Smith"}
]
}
}
来自以下 HTML:
<div id="data">
<ul><span class="board-title">Staff Retreat</span>
<li><span class="category-title">Games</span>
<ul>
<li>
<span class="title">Rockband</span>
<span class="details">1hr</span>
</li>
<li>
<span class="title">Texas Hold em</span>
<span class="details">30min</span>
</li>
</ul>
</li>
<li><span class="category-title">Talks</span>
<ul>
<li>
<span class="title">The Old You</span>
<span class="details">Dr. Smith</span>
</li>
</ul>
</li>
</ul>
</div>
我是循环/数组/对象的新手 - 所以非常感谢您的帮助!
我在这个项目的其他地方使用 jQuery,如果它有帮助的话。
谢谢!
最佳答案
有多种方法。这是一个:
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;
});
如果您更改 HTML 的结构,这很可能会中断。如果您有大量这样的数据,此代码也可能会很慢。
要了解使用的方法,请查看 jQuery documentation .
关于javascript - 如何使用 javascript/jquery 从嵌套列表生成嵌套的 json 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6592417/