Question

我想生成以下对象：

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。

谢谢！

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 documentation。

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。

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

3 个答案: