Question

我有一个JSON，并且无法将其格式化为包含子列表项的列表。我有点工作，但可能只是缺少一些简单的东西，我希望你们可以帮助我。

我的JSON看起来像这样：

var json = {
    "siteMap": [
        {
            "title": "Red",
            "link": "red.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        },
        {
            "title": "Blue",
            "link": "blue.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        },
        {
            "title": "Green",
            "link": "green.html"
        },
        {
            "title": "Yellow",
            "link": "yellow.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        }
    ]
}

如果一个对象没有'subPageArray'，我希望那里不是该项目下的子列表。

我的jQuery看起来像这样：

$.each(json.siteMap, function (i, val) {
    var i = 0,
        a = i++,
        data = "<li class='topLevel'><a href='/" + this.link + "'>" + this.title + "</a><ul><li class='subLevel'><a href='/" + this.subPageArray[i].link + "'>" + this.subPageArray[a].subTitle + "</a></li></ul></li>";
        i++;    
        $(data).appendTo(".siteMapContent ul");
});

我的HTML看起来像这样：

<div class="siteMapContent">
    <ul></ul>
</div>

我希望最终结果如下：

<ul>
    <li><a href="red.html">Red</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
    <li><a href="blue.html">Blue</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
    <li><a href="green.html">Green</a></li>
    <li><a href="yellow.html">Yellow</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
</ul>

Answer 1

这不是最干净的方式，但它完成了工作http://jsfiddle.net/8k6nw/

当然，你需要迭代子项目。

var html = "<ul>";

json.siteMap.forEach(function(item) {

    html += "<li><a href='"+item.link+"'>"+item.title+"</a>";

    if (item.subPageArray) {

        html += "<ul>";

        item.subPageArray.forEach(function(subitem) {

              html += "<li><a href='"+subitem.link+"'>"+subitem.subTitle+"</a></li>";      

        });

        html += "</ul>";

    }

    html += "</li>";
});

document.body.innerHTML = html + "</ul>";

Answer 2

$.each(json.siteMap, function (i, val) {
    var data="<li class='topLevel'><a href='/" + this.link + "'>" + this.title + "</a><ul>";
    if(this.subPageArray!=undefined){  // TO check if subPageArray exists here in case of Green
       for (i = 0; i < this.subPageArray.length; ++i) {
           //Adding the internal li
            data += "<li class='subLevel'><a href='/" + this.subPageArray[i].link + "'>" + this.subPageArray[i].subTitle + "</a></li>";
       }
    }
       data+="</ul></li>";

        $(data).appendTo(".siteMapContent .hii");
});

你的html代码：我为ul添加了一个类名，所以动态生成的代码不会被添加到内部ul

<div class="siteMapContent">
    <ul class="hii"></ul>
</div>

工作小提琴：http://jsfiddle.net/Hp8ZY/3/

将嵌套的JSON输出到带有子列表项的<ul> </ul>

2 个答案: