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

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，然后在您的页面中的 variables = jQuery.parseJSON(here); 中回显它；

现在，如果你不能这样做，并且你真的想从 HTML 中读取它，那么你应该首先使用 $('#data') 选择 id 数据并获取它的 children()。然后为孩子们使用 .each() 。然后将孩子放入对象，然后使用 .each() 检查其每个 children() 并将它们添加到您的对象中。如果您可能不止这些级别，我建议为此执行递归函数。

PS：我认为将 Span 放在 UL 和 LI 之间的 HTML 不合适。