数组遍历for循环

!

/**

• 题目要求
• 1；表格样式 呈现下列数据
• 2：表格表体为 categoryName：服装类 数据
• 2：表格表题为 categoryName:男装等数据
• 3：没写展示男装下所有服装数据 例如 短袖T许；并展示对应的Id数据
  */
  var dressDate =
  {
  “code”: 200,
  “msg”: “success”,
  “data”: {
  “id”: 69,
  “categoryName”: “服装类”,
  “children”: [
  {
  “id”: 70,
  “categoryName”: “男装”,
  “children”: [
  {
  “id”: 104,
  “categoryName”: “短袖T恤”,
  “children”: []
  },
  {
  “id”: 105,
  “categoryName”: “背心”,
  “children”: [],
  }
  ]
  },
  {
  “id”: 70,
  “categoryName”: “女装”,
  “children”: [
  {
  “id”: 104,
  “categoryName”: “裙子”,
  “children”: []
  },
  {
  “id”: 105,
  “categoryName”: “半袖”,
  “children”: [],
  }
  ]
  },
  {
  “id”: 70,
  “categoryName”: “少女装”,
  “children”: [
  {
  “id”: 104,
  “categoryName”: “裙子”,
  “children”: []
  },
  {
  “id”: 105,
  “categoryName”: “短裤”,
  “children”: [],
  },
  {
  “id”: 106,
  “categoryName”: “半袖”,
  “children”: [],
  }
  ]
  },
  {
  “id”: 70,
  “categoryName”: “儿童装”,
  “children”: [
  {
  “id”: 104,
  “categoryName”: “短裙子”,
  “children”: []
  },
  {
  “id”: 105,
  “categoryName”: “长裤子”,
  “children”: [],
  }, {
  “id”: 106,
  “categoryName”: “小帽子”,
  “children”: [],
  },
  {
  “id”: 107,
  “categoryName”: “小鞋子”,
  “children”: [],
  },
  ]
  }, {
  “id”: 70,
  “categoryName”: “中年人装”,
  “children”: [
  {
  “id”: 104,
  “categoryName”: “外衣”,
  “children”: []
  },
  {
  “id”: 105,
  “categoryName”: “衬衫”,
  “children”: [],
  },
  {
  “id”: 106,
  “categoryName”: “西装”,
  “children”: [],
  },
  {
  “id”: 107,
  “categoryName”: “西裤”,
  “children”: [],
  },
  {
  “id”: 108,
  “categoryName”: “帽子”,
  “children”: [],
  },
  ]
  }
  ]
  }
  }

var data = dressDate.data
console.log(data)
var mytable = document.createElement(‘table’)
document.body.appendChild(mytable)
// console.log(data.children[]);

console.log(data.children.length)
console.log(data.children[1].children[1].categoryName)

for (var i = 0; i < data.children.length; i++) {
var mytr = document.createElement(‘tr’)
mytable.appendChild(mytr)
var myth = document.createElement(‘th’)
mytr.appendChild(myth)
myth.innerText = data.children[i].categoryName
console.log(data.children[i])

for (var j = 0; j < data.children[i].children.length; j++) {
  var mytd = document.createElement('td')
  mytr.appendChild(mytd)
  mytd.innerText = data.children[i].children[j].categoryName
  console.log(data.children[i].children[j].children)
  if (data.children[i].children[j].children.length == 0) {
    // var mytr=document.createElement('tr')
    var mytd = document.createElement('td')
    mytr.appendChild(mytd)
    mytd.innerHTML = data.children[i].children[j].id
    mytable.appendChild(mytr)
  } 
  else {
    
    for (var k = 0; k < data.children[i].children[j].children.length; k++) {
      // console.log('好像没有数据')
    }
  }

}

}

// for循环，表达式之zhi次数循环题与外区别
// 1内部执行多次，外部语句执行一次

var data = dressDate.data
console.log(data)
var mytable = document.createElement(‘table’)
document.body.appendChild(mytable)
console.log(data.children);
for(var i=0;i<data.children.length;i++){
console.log(data.children[i])
var mytr=document.createElement(‘tr’)
mytable.appendChild(mytr)
var myth=document.createElement(‘th’)
mytr.appendChild(myth)
myth.innerHTML=data.children[i].categoryName
console.log(data.children[i].categoryName)
for(var j=0;j<data.children[i].children.length;j++){
var mytf=document.createElement(‘tf’)
myth.appendChild(mytf)
mytf.innerHTML=data.children[i].children[j].categoryName
console.log(data.children[i].children[j].categoryName)
if( data.children[i].children[j].children==0){
var mydu=document.createElement(‘du’)
myth.appendChild(mydu)
mydu.innerHTML=data.children[i].children[j].id
}else{
console.log(‘s数据还未出来’)
}

}
}

效果图1
男装 短袖T恤 104 背心 105
女装 裙子 104 半袖 105
少女装 裙子 104 短裤 105 半袖 106
儿童装 短裙子 104 长裤子 105 小帽子 106 小鞋子 107
中年人装 外衣 104 衬衫 105 西装 106 西裤 107 帽子 108

效果图2
男装短袖T恤104背心105
女装裙子104半袖105
少女装裙子104短裤105半袖106
儿童装短裙子104长裤子105小帽子106小鞋子107
中年人装外衣104衬衫105西装106西裤107帽子108