如何在数据列表（dl）中打印json数据[重复]答案

【问题标题】：How to print json data in data list (dl) [duplicate]如何在数据列表（dl）中打印json数据[重复]
【发布时间】：2018-04-19 22:17:50
【问题描述】：

我正在尝试遍历一个多维数组的 json 数据，但每次我遍历这个数组时，我只会打印出数组的最后一个元素。

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) {
  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>'
    );

    $("#content").html(dldata);
  }

} else {
  console.log('no item for this categories');
}

如上所述，我的问题是，在运行代码后，只有数组中的最后一个元素被打印为this fiddle 显示。

在小提琴中Costumes、Reenactment Theater和Reenactment & Theater被打印出来，这是上面每个json数组的最后一个元素。

我的预期输出如下：

Baby & Toddler Clothing
   Baby Clothing Accessories
   Baby Shoes`


Kids' Clothing, Shoes & Accessories
   Boys Clothing [Sizes 4 & Up]
   Boys Shoes


Costumes, Reenactment Theater
   Costumes
   Reenactment & Theater

我期待上面的输出，但我实际得到的只是：

Costumes, Reenactment Theater
   Costumes

希望读者能理解我的问题，提前感谢您的帮助。

【问题讨论】：

你的预期输出是什么？
@kalai 非常感谢，我将编辑我的问题以显示我的预期输出
我认为这是因为最后一部分（定义 dldata）没有连接循环的三个运行。它只是显示最后一个通过循环的。尝试将 $("#content").html(dldata) 更改为 $("#content").append(dldata)
这是你之前做的复制品，不要重复同样的问题。

标签： javascript json

【解决方案1】：

这是因为每次第一个循环运行时都会清除内容 div 的内容。尝试使用：

$("content").append(dldata);

相反，您应该会按预期看到所有三个输出。

【讨论】：

【解决方案2】：

你可以试试这个（我做的很快，需要重构）：

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) {
  firstdata = data[0];
  secdata = data[1];
  result = '<dl>';
  firstdata.map((firstD, i) => {
    result += "<dt href='" + firstD.id + "'>" + firstD.name + "</dt>";
    secdata[i].map(secD => result += "<dd href='" + secD.id + "'>" + secD.name + "</dd>");
    
    });
result += '</dl>';


    console.log(result);


} else {
  console.log('no item for this categories');
}

【讨论】：