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”＆lt; - 这些将动态生成）：

Main（#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数据作为数组。

Answer 2

我的代码在JSfiddle。

作为JSON解析器，我使用了this one。

主代码是解析后的JSON的递归渲染器：

function recursive_parse(result) {
    var html = '<ul>';
    for (var k in result) {
        html = html + '<li>' + result[k].label + ' (' + result[k].url + ')';
        html = html + recursive_parse(result[k].subnav);
        html = html + '</li>';
    }
    html = html + '</ul>';
    return html;
}

var result = json_parse($("div#test1111").html());
var html = recursive_parse(result);
$("div#test2222").html(html);

Answer 3

Unomi，这就是我所拥有的：

var m1 = {
  "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"
      }
    ]
  }
};

var renderItem = function(item){
  return "<li><a href='"+item.url+"'>"+item.label+"</a></li>"; 
};

var renderList = function(list){
  var renderedList = "<ul>";
  var renderedItem = "";
  for (item in list){
    renderedItem = renderItem(item);
    if(item.subnav){
      renderedItem.replace("</li>", renderList(item.subnav) +"</li>");
    }
    renderedList += renderedItem;
  }
  return renderedList + "</ul>";
}

var lc = document.getElementById("container");
lc.innerHTML = renderList(m1);

但它只提供以下内容：

未定义
未定义
未定义

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

3 个答案: