Question

我想生成我的JSON数据的树视图。因此，将 JSON数据解析为多级（！）无序HTML列表会很不错。我发现了一些插件，但是我无法让它们使用我的JSON数据。

很好的解决方案是调用函数并将json数据作为参数移交。结果可能是多级无序列表。我假设函数必须遍历数据的所有JSON数据并写入 ul 和 li 标记。

有没有直接的方法呢？

TIA！

PS：示例树（使用我的JSOn数据）： http://braincast.nl/samples/jsoneditor/ http://www.thomasfrank.se/downloadableJS/JSONeditor_example.html

Answer 1

只是一个简单的例子：

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版本：

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

Answer 2

这是一个完整的纯JavaScript解决方案。递归遍历JSON对象，并随时构建ul和li。不过，最好不要一次向DOM添加元素。

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/

Answer 3

您是否尝试过使用PHP和json_decode();

http://php.net/manual/en/function.json-decode.php

这将在PHP中将您的JSON字符串作为数组返回，然后您可以循环遍历该数组以创建您的UL＆gt;李清单。

只是一个想法..

从JSON数据生成无序列表？

3 个答案: