javascript - 用纯 Javascript 遍历多维数组

Question

我有以下 Json 文件，我正在尝试遍历所有内容，但是嵌套数组中只显示了一项。不知道我在这里做错了什么。

JSON：

{
   "items":[
      {
         "label":"red",
         "url":"red",
         "items":[

         ]
      },
      {
         "label":"blue",
         "url":"#/blue",
         "items":[
            {
               "label":"green",
               "url":"#/green"
            },
            {
               "label":"yellow",
               "url":"#/yellow"
            },
            {
               "label":"pink",
               "url":"#/pink"
            }
         ]
      },......

JS：

var d = document, 
        main = d.getElementsByTagName('nav')[ 0 ],
        ul = d.createElement( 'ul' ),
        i;

        main.appendChild( ul );

        axios.get('../data/colors.json')
        .then(function (response) {
            console.log(response.data.items);

            for( var i in response.data.items ){
                var li = d.createElement( 'li' ); 
                if(response.data.items[i].items.length){
                    li.innerHTML = "<a class='meta'>" + response.data.items[i].label + "<div>" + response.data.items[i].items[i].label + "</div>" + "</a>"; // create a new li element
                }
                else {
                    li.innerHTML = "<a class='meta'>" + response.data.items[i].label + "</a>"; // create a new li element
                }
                ul.appendChild( li );// every time append a new item

            }

        })
        .catch(function (error) {
            console.log(error);
        });

期望的输出：

<ul>
<li>red<li>
<li>blue
  <div>green </div>
  <div>yellow </div>
  <div>pink</div>
</li>
</ul>

标签： javascriptjsonloopsmultidimensional-array

Answer 1

您需要迭代/循环嵌套项目，而您没有这样做。基本上为第二级项目添加另一个循环。

这是一个清理后的版本：http: //jsfiddle.net/DennisRas/zyn52p8v/
注意：我已经删除了 .axios 模块以显示什么是重要的。

const data = {
   "items":[
      {
         "label":"red",
         "url":"red",
         "items":[

         ]
      },
      {
         "label":"blue",
         "url":"#/blue",
         "items":[
            {
               "label":"green",
               "url":"#/green"
            },
            {
               "label":"yellow",
               "url":"#/yellow"
            },
            {
               "label":"pink",
               "url":"#/pink"
            }
         ]
      },
      {
         "label":"blue",
         "url":"#/blue",
         "items":[
            {
               "label":"green",
               "url":"#/green"
            },
            {
               "label":"yellow",
               "url":"#/yellow"
            },
            {
               "label":"pink",
               "url":"#/pink"
            }
         ]
      },
      {
         "label":"blue",
         "url":"#/blue",
         "items":[
            {
               "label":"green",
               "url":"#/green"
            },
            {
               "label":"yellow",
               "url":"#/yellow"
            },
            {
               "label":"pink",
               "url":"#/pink"
            }
         ]
      }
    ]
};

const nav = document.querySelector('nav');
const ul = document.createElement( 'ul' );

nav.appendChild(ul);

data.items.forEach(function(item) {
  const li = document.createElement('li');
  let html = "<a class='meta'>" + item.label;

  if (item.items && item.items.length) {
    item.items.forEach(function(subitem) {
        html += "<div>" + subitem.label + "</div>";
    });
  }

  html += "</a>";

  li.innerHTML = html;
  ul.appendChild(li);// every time append a new item
});

console.log(data.items);