轉換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以下子彈名單？假設你不知道什麼第一節點的呼叫標記（例如，「主」，「項目」 < - 它們將被動態生成）：

• 主（#main）
• 項目（＃工程）
• 設置（#settings）
  • 隱私（#privacy）
  • 安全（的#Security）
  • 高級（#advanced）

感謝

Answer 1

我的代碼是在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 2

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); 

但只呈現如下：

• undefined
• undefined
• undefined

Answer 3

讓我們不要使用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數據作爲一個數組。