javascript 从 JSON 数据生成无序列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6692538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Generate unordered list from JSON Data?
提问by manuel
I'd like to generate a tree view of my JSON data. Therefore it would be nice to parse the JSON datainto a multi-level (!) unordered HTML list. I found a few plugins but I can't get them to work with my JSON data.
我想生成我的 JSON 数据的树视图。因此，最好将JSON 数据解析为多级 (!) 无序列表 HTML 列表。我找到了一些插件，但我无法让它们处理我的 JSON 数据。
Nice solution would be a call to a function and hand over the json data as parameter. The result could be a multi-level unordered list. I assume that the function has to loop through all the JSON data the data and write uland litags.
不错的解决方案是调用函数并将 json 数据作为参数传递。结果可能是一个多级无序列表。我假设该函数必须遍历所有 JSON 数据和数据并写入ul和li标签。
Is there a straight forward way to do that?
有没有直接的方法来做到这一点？
tia!
蒂亚！
PS: Example trees (that work with my JSOn data): http://braincast.nl/samples/jsoneditor/http://www.thomasfrank.se/downloadableJS/JSONeditor_example.html
PS：示例树（适用于我的 JSOn 数据）：http: //braincast.nl/samples/jsoneditor/ http://www.thomasfrank.se/downloadableJS/JSONeditor_example.html
回答by Karolis
Just a quick simple example:
只是一个简单的例子：
function tree(data) {
if (typeof(data) == 'object') {
document.write('<ul>');
for (var i in data) {
document.write('<li>' + i);
tree(data[i]);
}
document.write('</ul>');
} else {
document.write(' => ' + data);
}
}
jQuery version:
jQuery 版本：
function tree(data) {
if (typeof(data) == 'object') {
var ul = $('<ul>');
for (var i in data) {
ul.append($('<li>').text(i).append(tree(data[i])));
}
return ul;
} else {
var textNode = document.createTextNode(' => ' + data);
return textNode;
}
}
$(document.body).append(tree(data));
回答by honkskillet
Here is a complete pure javascript solution. Recursive traverse the JSON object and construct you ul and li's as you go. It's better for not to add elements to the DOM one at a time, though.
这是一个完整的纯 javascript 解决方案。递归遍历 JSON 对象并随时构造 ul 和 li。不过，最好不要一次向 DOM 添加一个元素。
HTML
HTML
<ul id="JSONunorderedList"></ul>
JAVASCRIPT
爪哇脚本
var jsonObj ={"labels":[ {"labelFont":"35pt Calibri","labelLocation":{"x":0.1483, "y":0.75}, "labelText":"fluffer"},{"labelFont":"35pt Calibri","labelLocation":{"x":0.666, "y":0.666}, "labelText":"nutter"}]}; //some json to display
var listEl =document.getElementById('JSONunorderedList');
makeList(jsonObj,listEl);
function makeList( jsonObject, listElement){
for(var i in jsonObject){//iterate through the array or object
//insert the next child into the list as a <li>
var newLI = document.createElement('li');
if (jsonObject[i] instanceof Array){
newLI.innerHTML=i+": ARRAY";
newLI.className="arrayOrObject"; //add a class tag so we can style differently
}
else if ( jsonObject[i] instanceof Object){
newLI.innerHTML=i+": OBJECT";
newLI.className="arrayOrObject"; //add a class tag so we can style differently
}
else
newLI.innerHTML=i+': '+jsonObject[i];
listElement.appendChild(newLI);
//insert a <ul> for nested nodes
if (jsonObject[i] instanceof Array || jsonObject[i] instanceof Object){
var newUL = document.createElement('ul');
//newUL.innerHTML=i;
listElement.appendChild(newUL);
makeList(jsonObject[i],newUL);
}
}
}
das fiddle http://jsfiddle.net/honkskillet/LvMnG/
回答by Nathan Fitzgerald - Fitzgenius
Have you tried using PHP and json_decode();
您是否尝试过使用 PHP 和 json_decode();
http://php.net/manual/en/function.json-decode.php
http://php.net/manual/en/function.json-decode.php
This would return your JSON string as an array in PHP and you can then loop through the array to create your UL > LI list.
这会将您的 JSON 字符串作为 PHP 中的数组返回，然后您可以遍历该数组以创建您的 UL > LI 列表。
Just an idea..
只是一个想法..
