javascript - 使用 JS 将 JSON 转换为多级项目符号列表

Question

谁能帮我制作以下 JSON 数据:

{
 "main": {
  "label":"Main",
  "url":"#main"
 },
 "project": {
  "label":"Project",
  "url":"#project"
 },
 "settings": {
  "label":"Settings",
  "url":"#settings",
  "subnav":[
  {
   "label":"Privacy",
   "url":"#privacy"
  },
  {
   "label":"Security",
   "url":"#security"
  },
  {
   "label":"Advanced",
   "url":"#advanced"
  }
  ]
 }
}

使用 JS 进入以下项目符号列表？假设您不知道第一个节点被标记为什么(例如“main”、“project”<- 这些将动态生成):

• 主要(#main)
• 项目(#project)
• 设置 (#settings)
  • 隐私(#privacy)
  • 安全(#security)
  • 高级(#advanced)

谢谢

Answer 1

我们不要使用 HTML 字符串破解，好吗？一旦任何数据具有类似 < 的字符，这就会中断。或 &在(或 " 在属性值中)。使用 DOM 方法，您不必担心字符转义:

function createNav(navs) {
    var ul= document.createElement('ul');
    for (name in navs) {
        var nav= navs[name];
        var a= document.createElement('a');
        a.href= nav.url;
        a.appendChild(document.createTextNode(nav.label));
        var li= document.createElement('li');
        li.id= 'nav-'+name;
        li.appendChild(a)
        if ('subnav' in nav)
            li.appendChild(createNav(nav.subnav));
        ul.appendChild(li);
    }
    return ul;
}

document.getElementById('navcontainer').appendChild(createNav(jsondata));

大多数 JS 框架都提供了一些快捷方式来使它不那么冗长。以 jQuery 为例:

function createNav(navs) {
    var ul= $('<ul>');
    for (name in navs) {
        var nav= navs[name];
        var li= $('<li>', {id: name});
        li.append($('<a>', {href: nav.url, text: nav.label}));
        if ('subnav' in nav)
            li.append(createNav(nav.subnav));
        ul.append(li);
    }
}

$('#navcontainer').append(createNav(jsondata));

请注意，无论哪种方式，您都在使用对象文字，这意味着您无法控制导航列表出现的顺序。你不能保证 main会在project之上.如果您想要定义的顺序，则必须将返回的 JSON 数据作为一个数组。