Jquery json到嵌套无序列表_Jquery_Html_Json_Html Lists

Jquery json到嵌套无序列表

jquery html json

Jquery json到嵌套无序列表,jquery,html,json,html-lists,Jquery,Html,Json,Html Lists,我试图在jQuery中将JSON转换为无序列表。这是我的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:\"Cameram

我试图在jQuery中将JSON转换为无序列表。这是我的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>


导演

执行主任1
执行主任2
执行主任3

副主任1
副主任2
副主任3

摄影师1
摄影师2

我该怎么办

干杯，

这正是您需要的：

使用jQuery模板API。这曾经是jQuery的一部分，但目前仅作为插件提供。然而，我认为jQuery很快会再次采用这种或类似的技术

它非常易于使用：

$.tmpl("template", jsonObject)

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

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

$.tmpl(
“${Id}${Name}”，
[{Id:1，名字：“沃纳”}，{Id:2，名字：“克劳斯”}]
);

这将导致以下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));

var data={name:“Director”，children:[{name:“Exe Director 1”}，{name:“Exe Director 2”}，{name:“Sub Director 3_1”}，{name:“Sub Director 3_2”}，{name:“Sub Director 3_3_3_1”}，children name:[{name:“Cameraman3_3_2”}]}；
var模板\
\
${name}\
\
{{each（childindex，child）children}\
${child.name}\
\
{{each（child2index，child2）child.childs}\
${child2.name}\
{{/每个}}\
\
\
{{/每个}}\
\
\
\
';
$（'body'）.empty（）.append（$.tmpl（模板，数据））；

浏览器结果：

董事
- 执行董事1