從無序列表構建json字符串

Question

我有以下無序列表

<ul>
    <li data-id="111" data-sub="0" data-url="home" data-active="1">Home</li>
    <li data-id="222" data-sub="0" data-url="about" data-active="1">About</li>
    <li data-id="333" data-sub="1" data-url="news" data-active="1">News
        <ul>
            <li data-id="444" data-sub="0" data-url="news/latest" data-active="1">Latest</li>
            <li data-id="555" data-sub="0" data-url="news/reports" data-active="1">Reports</li>
        </ul>
    </li>
</ul>

我想獲取數據屬性並將其輸出為JSON，以使其與以下格式相同

[{
    "active": 1,
    "url": "home",
    "sub": 0,
    "id": 111
}, {
    "active": 1,
    "url": "about",
    "sub": 0,
    "id": 222
}, {
    "active": 1,
    "url": "news",
    "sub": 1,
    "id": 333,
    "child": [{
        "active": 1,
        "url": "news/latest",
        "sub": 0,
        "id": 444
    }, {
        "active": 1,
        "url": "news/reports",
        "sub": 0,
        "id": 555
    }]
}]

目前我有以下JS

<script>
    var mynav = [];
    $("li").each(function () {
          if($(this).children("ul").length) {
              $(this).data('child', '"' + $(this).data() + '"');
              mynav.push($(this).data());
       }
        mynav.push($(this).data());
    });
    mynav = JSON.stringify(mynav);
    console.log(mynav);
</script>

輸出以下內容。

[{
    "active": 1,
    "url": "home",
    "sub": 0,
    "id": 111
}, {
    "active": 1,
    "url": "about",
    "sub": 0,
    "id": 222
}, {
    "active": 1,
    "url": "news",
    "sub": 1,
    "id": 333,
    "child": "\"[object Object]\""
}, {
    "active": 1,
    "url": "news",
    "sub": 1,
    "id": 333,
    "child": "\"[object Object]\""
}, {
    "active": 1,
    "url": "news/latest",
    "sub": 0,
    "id": 444
}, {
    "active": 1,
    "url": "news/reports",
    "sub": 0,
    "id": 555
}]

當列表項具有其他總計項時（例如我的示例），我無法將列表轉換為正確的JSON格式，因此對於簡單的無序列表來說，我的格式非常合適。 我還需要對我的JS進行什么操作才能使其格式化子列表，以及我想要它們的方式？

Answer 1

您可以為頂部元素指定一個ID，例如

<ul id="mynav">
    <li data-id="111" data-sub="0" data-url="home" data-active="1">Home</li>
    <li data-id="222" data-sub="0" data-url="about" data-active="1">About</li>
    <li data-id="333" data-sub="1" data-url="news" data-active="1">News
        <ul>
            <li data-id="444" data-sub="0" data-url="news/latest" data-active="1">Latest</li>
            <li data-id="555" data-sub="0" data-url="news/reports" data-active="1">Reports</li>
        </ul>
    </li>
</ul>

然后

var nav = getNav($('#mynav'));

function getNav($ul) {
    return $ul.children('li').map(function () {
        var $this = $(this),
            obj = $this.data(),
            $ul = $this.children('ul');
        if ($ul.length) {
            obj.child = getNav($ul)
        }
        return obj;
    }).get()
}

演示： 小提琴

Answer 2

這是一種方法

var nav = (function rec(el) {
    return el.map(function() {
        var o = $(this).data(),
            c = $(this).children('ul').children('li');

        if ( c.length > 0 ) o.child = rec(c);
        return o
    }).get();
})($(' body > ul > li'));

遞歸遍歷子級並構建JSON

小提琴

Answer 3

您要執行的操作： DEMO

var mynav = [];
    $("#ulid").children("li").each(function () {
        var that = this;
          if($(that).children("ul").length) {
              var temp = [];/*I am CHILD array*/
              $(that).children("ul").find("li").each(function(){
                  temp.push($(this).data());
              });
              $(that).data().child = temp;
       }
        mynav.push($(that).data());
    });
    mynav = JSON.stringify(mynav, null, 4);
$('body').html('<pre>' + mynav + '</pre>');