Question

请看看这个JSFiddle。

var data = [
    {
        description: '2ndtierchild|1sttierchild|parent',
        name: 'item1'
    },

    {
        description: '2ndtierchildagain|1sttierchild|parent',
        name: 'item2'
    },

    {
        description: 'another2ndtierchild|another1sttierchild|parent',
        name: 'item3'
    }

];

我想将此JSON解析为HTML格式，如下所示。

<ul>
    parent
    <li>
        1sttierchild        
        <ul>
            <li>2ndtierchild</li>
            <li>2ndtierchildagain</li>
        </ul>
    </li>
    <li>
        another1sttierchild        
        <ul>
            <li>another2ndtierchild</li>
        </ul>
    </li>
</ul>

此解析基于JSON中的“description”属性。

我想拆分description属性并根据该字符串数组创建ul-li列表。

如果名称在同一级别中相似，则不应创建新节点。

例如。 1sttierchild在第1级重复。所以，你可以看到，只为1sttierchild

创建了一个li标签

提前致谢

Answer 1

试试这个：http://jsfiddle.net/4vpvm/2/

var data = [
{
    description: '2ndtierchild|1sttierchild|parent',
    name: 'item1'
},

{
    description: '2ndtierchildagain|1sttierchild|parent',
    name: 'item2'
},

{
    description: 'another2ndtierchild|another1sttierchild|parent',
    name: 'item3'
}

];

var createUL = function(id){
$("body").append("<ul id='"+id+"'>");

$.each( data, function( index, value ){
    var list = value.description.split("|");
    $("#"+id).append("<li>" + value.name);
    $("#"+id).append("<ul id='"+value.name+"'>");
    $.each( list, function( listIndex, item ){
        $("#"+value.name).append("<li>"+item+"</li>");
    });
    $("#"+id).append("</ul>");
    $("#"+id).append("</li>");

});

$("body").append("</ul>");
};

$(document).ready(function(){
createUL("firstul");
});

Answer 2

这是一个解决方案：

http://jsfiddle.net/4vpvm/3/

var root = document.getElementById("root");

for (var i = 0; i < data.length; i++) {
    processItem(data[i].description);
}

function processItem(i) {
    var cells = i.split("|");
    var i = cells.length;
    var currNode = root;
    while (--i >= 0) {
        var node = document.getElementById(cells[i]);
        if (node === null) {
            if (!currNode.firstElementChild) {
                currNode.appendChild(document.createElement("ul"));
            }
            currNode = currNode.firstElementChild;
            node = document.createElement("li");
            node.id = cells[i];
            node.innerText = cells[i];
            currNode.appendChild(node);
        }
        currNode = node;
    }
}

如果您使用jQuery，这可能不那么难看，但您没有指定，所以我选择了vanilla JavaScript。

它的作用是通过你的列表，对于每个项目，它将拆分描述字符串，然后尝试找到一个节点（从数组的末尾回到开头），匹配id。如果找不到，则会创建一个新节点并将其附加到父节点。如果父母还没有孩子，则会创建并附加额外的ul标记。如果找到id，它只会移动到数组中的下一个项目。

如何解析这个JSON？需要逻辑来基于JSON上的属性创建HTML

2 个答案: