定义我的导航的JSON有标题类型和类别类型;d希望转换为Javascript中的嵌套UL LI元素

The JSON that defines my nav has header types and category types that I'd like to convert to nested UL LI elements in Javascript

本文关键字：类型 Javascript 转换 希望 嵌套 元素 LI UL JSON 导航 我的      更新时间：2023-09-26

我的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"
}

我想构建一个嵌套的ULLI系统来呈现如下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>);
        }
    }
});

首先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. CCD_ 2和CCD_

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

相关文章：