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

请看一下这个JSFIDLE

我想将这个JSON解析为如下所示的HTML格式

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

父母亲

1儿童

第二梯队
第二个孩子又来了



另一个孩子

另一个第二个孩子

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

我想分割description属性并基于该字符串数组创建ulli列表

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

例如，第1级重复第1级。因此，您可以看到，只有一个li标记是为1sttierchild创建的

提前感谢

试试这个：

var数据=[
{
描述：'2ndtierchild | 1sttierchild | parent'，
名称：'item1'
},
{
描述：'2NDTIERCHILD再次| 1sttierchild |家长'，
名称：'item2'
},
{
描述：“另一个第2个孩子|另一个第1个孩子|父母”，
名称：“项目3”
}
];
var createUL=函数（id）{
$（“正文”）。追加（“
”）；
$.each（数据、函数（索引、值）{
var list=value.description.split（“|”）；
$（“#”+id.append（“
”+value.name）；
$（“#”+id）.append（“”）；
$.each（列表，函数（列表索引，项）{
$（“#”+value.name）。追加（“
”+item+”
”）；
});
$（“#”+id）；
$（“#”+id）。追加（“”）；
});
$（“正文”）。附加（“
”）；
};
$（文档）.ready（函数（）{
createUL（“firstul”）；
});

这里有一个解决方案：

var root=document.getElementById（“根”）；
对于（变量i=0；i=0）{
var节点=document.getElementById（单元格[i]）；
如果（节点===null）{
如果（！currNode.firstElementChild）{
currNode.appendChild（document.createElement（“ul”）；
}
currNode=currNode.firstElementChild；
节点=document.createElement（“li”）；
node.id=单元[i]；
node.innerText=单元格[i]；
currNode.appendChild（节点）；
}
currNode=节点；
}
}

如果您使用jQuery，这可能不会那么难看，但是您没有指定，所以我使用了香草JavaScript

---

它所做的是遍历您的列表，对于每个项目，它将拆分描述字符串，然后尝试查找一个具有匹配的

id

的节点（从数组的末尾回到开头）。如果找不到，它将创建一个新节点并将其附加到父节点。如果父项还没有任何子项，它将创建并附加额外的

ul

标记。如果找到

id

，它只会移动到数组中的下一项。

不清楚如何从您必须的JSON转换为您想要的格式。请花更多的精力解释。因为我们都喜欢学究式的语言，所以这不是JSON——这是一个JavaScript数组文字，带有对象文字的子对象。您展示的示例是一个对象数组，而不是JSON。因此，您的问题与解析JSON无关。请相应地重新表述您的问题。这可能有一个严格的逻辑，但我们不太清楚：）基本上，他想从多个路径构建一个递归的文件夹式结构。谢谢。如果我不清楚我的要求，我很抱歉。如果名称在同一级别上相同，则不应创建新的li节点。它应该使用现有的li节点。我把我的问题编辑成这样。这就是我要找的。谢谢：-）

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

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

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