jquery - json 到嵌套无序列表

Question

我正在尝试将 JSON 转换为 jQuery 中的无序列表。这是我的 JSON 数据。

var myJSON = "{name:\"Director\",children:[name:\"Exe Director1\",name:\"Exe Director2\",name:\"Exe Director3\",children:[name:\"Sub Director1\",name:\"Sub Director2\",name:\"Sub Director3\",children:[name:\"Cameraman 1\",name:\"Cameraman 2\"]]]}";

预期的输出是

<ul>
    <li>Director
        <ul>
            <li>Exe Director 1</li>
            <li>Exe Director 2</li>
            <li>Exe Director 3
                <ul>
                    <li>Sub Director 1</li>
                    <li>Sub Director 2</li>
                    <li>Sub Director 3
                        <ul>
                            <li>Cameraman 1</li>
                            <li>Cameraman 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我该怎么办！

干杯，

Answer 1

这正是您需要的：

使用 jQuery 模板 API。这曾经是 jQuery 的一部分，但目前只能作为插件使用。不过，我认为 jQuery 很快就会再次采用这种或类似的技术。

http://api.jquery.com/category/plugins/templates/

它超级好用：

$.tmpl("template", jsonObject)

这是一个小的基本模板示例：

$.tmpl(
    "<li><b>${Id}</b>${Name}</li>", 
    [{Id:1, Name:"Werner"}, {Id:2, Name:"Klaus"}]
);

这将产生以下可以附加到任何地方的 jQuery HTML 元素：

1维尔纳

2克劳斯

对于您的复杂数据，您还可以使用“{{each}}”模板表示法迭代 JSON 子对象。这里是您的数据和模板的代码：

var data = {name:"Director",children:[{name:"Exe Director1"},{name:"Exe Director2"},{name:"Exe Director3", children:[{name:"Sub Director3_1"},{name:"Sub Director3_2"},{name:"Sub Director3_3",children:[{name:"Cameraman3_3_1"},{name:"Cameraman3_3_2"}]}]}]};

var template = '\
    <ul>\
        <li>${name}\
            <ul>\
                {{each(childindex, child) children}}\
                    <li>${child.name}\
                        <ul>\
                            {{each(child2index, child2) child.children}}\
                                <li>${child2.name}</li>\
                            {{/each}}\
                        </ul>\
                    </li>\
                {{/each}}\
            </ul>\
        </li>\
    </ul>\
';

$('body').empty().append($.tmpl(template, data));

浏览器结果：

• 导向器
  • 执行董事1
  • exe Director2
  • exe Director3
    • 副主任3_1
    • 副主任3_2
    • 副主任3_3
    • ...

这可以通过包含嵌套模板进行调整以支持完全递归......但我是一个懒惰的人，剩下的就是为你做的。

干杯，会

Answer 2

您可以按如下方式使用递归函数。每次调用该函数时，它都会返回一个“UL”及其子“LI”。

function generateMenu(data) {

    var ul = $("<ul>");

        $(data).each(function (i, dir) {
             var li = $('<li>' + dir.name + '</li>');
             ul.append(li);

            if (dir.children != null && dir.children.length > 0) {
                li.append(generateMenu(dir.children));
            }

        });

    return ul;
};

将其用作：

$("#some-div").append(generateMenu(myJsonData));

Json是，

var myJsonData = JSON.parse('{"name": "Director","children": [{ "name": "Exe Director1" },{ "name": "Exe Director2" },{"name": " Exe Director3","children": [{ "name": "Sub Director1" },{ "name": "Sub Director2" },{"name": "Sub Director3","children": [{ "name" : "摄影师 1" },{ "name": "摄影师 2" }]}]}]}');