如何遍历jason数据并将其显示在数据列表标记中(dl)

时间:2018-04-19 08:12:09

标签: javascript jquery html json

我试图遍历一些JSON数据(var mydata),而mydata是两个元素的数组,数组中的第二个元素

mydata[0]是一个多维数组,我需要在dt中显示第一个元素,即var mydata = [ [{ "id": "67", "name": "Baby & Toddler Clothing " }, { "id": "68", "name": "Kids' Clothing, Shoes & Accessories" }, { "id": "69", "name": "Costumes, Reenactment Theater" }], [ [{ "id": "572", "name": "Baby Clothing Accessories " }, { "id": "573", "name": "Baby Shoes" }], [{ "id": "579", "name": "Boys Clothing [Sizes 4 & Up] " }, { "id": "580", "name": "Boys Shoes" }], [{ "id": "588", "name": "Costumes" }, { "id": "589", "name": "Reenactment & Theater " }] ] ] function getCategories(id){ $.ajax({ url: '{$getcatUrl}', type: 'POST', data: {category_id: id}, success: function (data) { data = jQuery.parseJSON(data); //console.log(data); return; if(data.length > 0){ firstdata = data[0]; secdata = data[1]; for(var i = 0; i < firstdata.length; i++) { level_1 = firstdata[i].name; level_1_id = firstdata[i].id; for(var j = 0; j< secdata.length; j++){ if(secdata[i][j] !== undefined){ level_2=''; level_2 = secdata[i][j].name; level_2_id = secdata[i][j].d; } console.log(level_2); } var dldata = $( '<dl>'+ "<dt href='" + level_1_id + "'>" + level_1 + "</dt>"+ "<dd href='" + level_2_id + "'>" + level_2 + "</dd>"+ '</dl>' ); } }else{ console.log('no item for this categories'); } }, error: function(jqXHR, errMsg) { // handle error console.log(errMsg); } }); } ,并在其中的dd中显示mydata [1]中的元素。

我尝试了所有选项,但我确实陷入困境,我需要任何帮助。以下是我的代码:

match  
id, name, match_type,  team1, team2 

set 

id, id_match , set_id, point_team1, point_team_2 

var level_1和level_1_id工作正常,但我一直收到变量level_2的错误,错误说不能读取属性&#39; name&#39;未定义的,任何解决这个问题的方法都将受到赞赏,并且我也愿意接受关于做得更好的新想法,

1 个答案:

答案 0 :(得分:0)

基本上问题是每次level_1循环运行时都会覆盖level_2for变量。因此,当您到达生成HTML的代码时,它们已被多次覆盖,只剩下最后一个版本,并且您在任何情况下都只打印一次。

这将解决它 - 在这种情况下,通过直接在每个循环中生成HTML元素,尽管你当然可以通过附加到变量然后在最后输出所有内容来实现,如果这是你的偏好。

var data = [
  [{
    "id": "67",
    "name": "Baby & Toddler Clothing "
  }, {
    "id": "68",
    "name": "Kids' Clothing, Shoes & Accessories"
  }, {
    "id": "69",
    "name": "Costumes, Reenactment Theater"
  }],
  [
    [{
      "id": "572",
      "name": "Baby Clothing Accessories "
    }, {
      "id": "573",
      "name": "Baby Shoes"
    }],
    [{
      "id": "579",
      "name": "Boys Clothing [Sizes 4 & Up] "
    }, {
      "id": "580",
      "name": "Boys Shoes"
    }],
    [{
      "id": "588",
      "name": "Costumes"
    }, {
      "id": "589",
      "name": "Reenactment & Theater "
    }]
  ]
]

if (data.length > 0) {
  var content = $("#content");
  firstdata = data[0];
  secdata = data[1];

  for (var i = 0; i < firstdata.length; i++) {
    var dl = $("#content").append("<dl/>");
    dl.append("<dt href='" + firstdata[i].id + "'>" + firstdata[i].name + "</dd>");

    for (var j = 0; j < secdata.length; j++) {
      if (secdata[i][j] !== undefined) {
        dl.append("<dd href='" + secdata[i][j].id + "'>" + secdata[i][j].name + "</dd>");
      }
    }
  }
  content.append(dl);
} else {
  console.log('no item for this categories');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>