在普通Javascript中迭代多维数组

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

JSON:

JS:

var d=document，
main=d.getElementsByTagName（'nav'）[0]，
ul=d.createElement（'ul'），
我
主要儿童（ul）；
get（“../data/colors.json”）
.然后（功能（响应）{
日志（response.data.items）；
对于（响应.data.items中的var i）{
var li=d.createElement（'li'）；
if（response.data.items[i].items.length）{
li.innerHTML=”“+response.data.items[i].label+++response.data.items[i].items[i].label++++；//创建新的li元素
}
否则{
li.innerHTML=“”+response.data.items[i].label+“”；//创建新的li元素
}
ul.appendChild（li）；//每次追加一个新项
}
})
.catch（函数（错误）{
console.log（错误）；
});

期望输出：

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

红色

蓝色的
绿色
黄色的
粉红色

---

我不认为您正在嵌套项数组上循环。您仅在父数组上循环

如果嵌套数组中有项，请为其添加另一个循环。比如说

for (var j in response.data.items[i].items) {
  li.innerHTML = "<a class='meta'>" + response.data.items[i].label + "<div>" + response.data.items[i].items[j].label + "</div>" + "</a>"; // create a new li element
}

for（响应中的var j.data.items[i].items）{
li.innerHTML=“”+response.data.items[i]。label+“”+response.data.items[i]。items[j]。label+“”++；//创建新的li元素
}

---

我认为有更好的模式来做for循环，但我只是把你的模式保留在这里。基本上，根本原因是，您没有在嵌套项上循环。

我认为您没有在嵌套项数组上循环。您仅在父数组上循环

如果嵌套数组中有项，请为其添加另一个循环。比如说

for (var j in response.data.items[i].items) {
  li.innerHTML = "<a class='meta'>" + response.data.items[i].label + "<div>" + response.data.items[i].items[j].label + "</div>" + "</a>"; // create a new li element
}

for（响应中的var j.data.items[i].items）{
li.innerHTML=“”+response.data.items[i]。label+“”+response.data.items[i]。items[j]。label+“”++；//创建新的li元素
}

---

我认为有更好的模式来做for循环，但我只是把你的模式保留在这里。基本上，根本原因是，您没有在嵌套项上循环。

以下是如何做到这一点-

var数据={
“项目”：[{
“标签”：“红色”，
“url”：“红色”，
“项目”：[
]
},
{
“标签”：“蓝色”，
“url”：“#/blue”，
“项目”：[{
“标签”：“绿色”，
“url”：“#/green”
},
{
“标签”：“黄色”，
“url”：“#/黄色”
},
{
“标签”：“粉红色”，
“url”：“#/pink”
}
]
}
]
}
var createList=函数（响应）{
var d=文件，
main=d.getElementById（'list'），
ul=d.createElement（'ul'），
我
主要儿童（ul）；
//日志（response.data.items）；
for（vari在response.data.items中）{
var li=d.createElement（'li'）；
if（response.data.items[i].items.length）{
li.innerHTML=“”+response.data.items[i].label+“”；//创建新的li元素
ul.appendChild（li）；//每次追加一个新项
var innerul=d.createElement（'ul'）；
for（var j in response.data.items[i].items）{
var innerli=d.createElement（'li'）；
innerli.innerHTML=”“+response.data.items[i].items[j].label+“”；//创建新的li元素
innerl.appendChild（innerli）；
}
li=innerul；
}否则{
li.innerHTML=“”+response.data.items[i].label+“”；//创建新的li元素
ul.appendChild（li）；//每次追加一个新项
}
ul.appendChild（li）；//每次追加一个新项
}
}
创建列表({
数据：数据
});
以下是您的方法-


var数据={
“项目”：[{
“标签”：“红色”，
“url”：“红色”，
“项目”：[
]
},
{
“标签”：“蓝色”，
“url”：“#/blue”，
“项目”：[{
“标签”：“绿色”，
“url”：“#/green”
},
{
“标签”：“黄色”，
“url”：“#/黄色”
},
{
“标签”：“粉红色”，
“url”：“#/pink”
}
]
}
]
}
var createList=函数（响应）{
var d=文件，
main=d.getElementById（'list'），
ul=d.createElement（'ul'），
我
主要儿童（ul）；
//控制台.log（响应数据.项）；
for（vari在response.data.items中）{
var li=d.createElement（'li'）；
if（response.data.items[i].items.length）{
li.innerHTML=“”+response.data.items[i].label+“”；//创建新的li元素
ul.appendChild（li）；//每次追加一个新项
var innerul=d.createElement（'ul'）；
for（var j in response.data.items[i].items）{
var innerli=d.createElement（'li'）；
innerli.innerHTML=”“+response.data.items[i].items[j].label+“”；//创建新的li元素
innerl.appendChild（innerli）；
}
li=innerul；
}否则{
li.innerHTML=“”+response.data.items[i].label+“”；//创建新的li元素
ul.appendChild（li）；//每次追加一个新项
}
ul.appendChild（li）；//每次追加一个新项
}
}
创建列表({
数据：数据
});
您需要在嵌套项上迭代/循环，而您没有这样做。基本上为第二级项目添加另一个循环

这里有一个清理过的版本：

注意：我已删除.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);

const数据={
“项目”：[
{
“标签”：“红色”，
“url”：“红色”，
“项目”：[
]
},
{
“标签”：“蓝色”，
“url”：“#/blue”，
“项目”：[
{
“标签”：“绿色”，
“url”：“#/green”
},
{
“标签”：“叫喊”
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);

function printList(list,container){
    var ul = document.createElement('ul');
    list.forEach(function(item){
        var li = document.createElement('li');
        li.innerHTML = '<div class="meta">' + item.label + '</div>';
        if(item.hasOwnProperty('items')){
            printList(item.items,li);
        }
        ul.appendChild(li);
    });
    container.appendChild(ul);
}

axios.get('../data/colors.json').then(function (response) {
    printList(response.data.items,document.body);
})