Преобразование JSON в многоуровневый маркированный список с использованием JS

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?Предполагая, что вы не знаете, как называются вызовы первых узлов (например, «основной», «проект» <- они будут генерироваться динамически): </p>

• Main (#main)
• Project (#project)
• Настройки (#settings)
  • Конфиденциальность (#privacy)
  • Безопасность (#security)
  • Advanced (#advanced)

Спасибо

Answer 1

Давайте не будем использовать взлом строк HTML, не так ли? Это сломалось бы, как только у любого из данных были символы как < или & in (или " в значениях атрибута). Используйте методы 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 я использовал этот .

Основной код является рекурсивным средством рендерингапроанализировал 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);