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元素任何地方：

Werner

克劳斯

为了您的复杂数据，可以使用 “{{每个}}” 模板标记也迭代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)); 

浏览器结果：

• 主任
  • 埃克Director1
  • 埃克Director2
  • 埃克Director3
    • 子Director3_1
    • 子Director3_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": "Cameraman 1" },{ "name": "Cameraman 2" }]}]}]}');