如何使用 javascript/jquery 從嵌套列表生成嵌套 json object

Question

我想生成以下 object：

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;
});

演示

如果您更改 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(here);

現在，如果你不能這樣做，並且你真的想從 HTML 中讀取它，那么你應該首先 select 使用 $('#data') 獲取 id 數據並獲取其 children()。 然后為孩子們使用.each()。 然后將孩子放到 object 中，然后使用.each() 檢查其每個 children() 並將它們添加到您的 object 中。 如果您可能不止這些級別，我建議為此執行遞歸 function。

PS：我認為將跨度放在 UL 和 LI 之間的 HTML 不合適。