从无序列表构建 json 字符串答案

【问题标题】：Build json string from unordered list从无序列表构建 json 字符串
【发布时间】：2014-10-13 07:59:15
【问题描述】：

我有以下无序列表

<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 做些什么才能让它按照我想要的方式格式化子列表？

【问题讨论】：

您需要取一个子数组来推送子值并将该子数组推送到父数组。

标签： javascript jquery html json list

【解决方案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()
}

演示：Fiddle

【讨论】：

【解决方案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

FIDDLE

【讨论】：

【解决方案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>');

【讨论】：