定义我的导航的 JSON 具有标题类型和类别类型，我想将它们转换为 Javascript 中的嵌套 UL LI 元素

Question

我的 JSON 是这样的：

{
     "categoryDisplaySubTypeId": "5",
     "catName": "header"
},
{
     "categoryDisplaySubTypeId": "10",
     "catName": "category"
},
{
     "categoryDisplaySubTypeId": "10",
     "catName": "category"
},
{
    "categoryDisplaySubTypeId": "10",
    "catName": "category"
},
{
    "categoryDisplaySubTypeId": "5",
    "catName": "header"
},
{
    "categoryDisplaySubTypeId": "10",
    "catName": "category"
},
{
    "categoryDisplaySubTypeId": "10",
    "catName": "category"
}

我想构建一个嵌套的 UL LI 系统来呈现如下所示的 HTML：

• 标题
  • 类别
  • 类别
  • 类别
• 标题
  • 类别
  • 类别

我尝试了各种嵌套循环，但似乎无法解决。

<!-- category nav -->
    <div id="sideNav">
        <ul class="sideUl">
        </ul>
    </div>
<!-- end category nav -->

$.each(object(i, value){
        if( value.categoryDisplaySubTypeId == "5" ) {
            $('.sideUl').append("<li>"+object.catName+"</li>);

        }
        if( value.categoryDisplaySubTypeId == "10" ) {
            $('.sideUl').append("<ul>");    
            $('.sideUl').append("<li>"+object.catName+"</li>);
        }
    }
});

Answer 1

首先，JSON 应该是一个数组，如下所示：

var obj = [{
     "categoryDisplaySubTypeId": "5",
     "catName": "header"
},
{
     "categoryDisplaySubTypeId": "10",
     "catName": "category"
},
{
     "categoryDisplaySubTypeId": "10",
     "catName": "category"
},
{
    "categoryDisplaySubTypeId": "10",
    "catName": "category"
},
{
    "categoryDisplaySubTypeId": "5",
    "catName": "header"
},
{
    "categoryDisplaySubTypeId": "10",
    "catName": "category"
},
{
    "categoryDisplaySubTypeId": "10",
    "catName": "category"
}];

然后使用 for each 循环遍历数组，如下所示：

obj.forEach( function (arrayItem)
{
    if( arrayItem.categoryDisplaySubTypeId == "5" ) {

            $('.sideUl').append("<li>"+arrayItem.catName+"</li>");

        }
      if( arrayItem.categoryDisplaySubTypeId == "10" ) {
            $('.sideUl').append("<ul><li>"+arrayItem.catName+"</li></ul>");    

        }
});

您的代码中的问题是：

1. 没有正确的结束双引号。
2. 没有关闭<ul>标签。
3. <ul>和<li>附加不正确。

请参阅此处的工作小提琴：“ https://jsfiddle.net/6zsf2hbs/3/ ”