如何遍历json数据并将其显示在数据列表标签（dl）中答案

【问题标题】：How to loop through jason data and display it in data list tag (dl)如何遍历json数据并将其显示在数据列表标签（dl）中
【发布时间】：2018-09-29 15:43:29
【问题描述】：

我正在尝试遍历一些 JSON 数据（var mydata），而 mydata 是一个包含两个元素的数组，数组中的第二个元素

mydata[1] 是一个多维数组，我需要在 dt 中显示第一个元素，即 mydata[0]，并在其中的 dd 中显示来自 mydata[1] 的元素。

我尝试了所有选项，但我真的被困住了，我需要任何帮助。以下是我的代码：

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);
            }
        });
   }

var level_1 和 level_1_id 工作正常，但我不断收到变量 level_2 的错误，错误说无法读取未定义的属性“名称”，对此问题的任何解决方案将不胜感激，并且我也愿意接受关于做得更好，

【问题讨论】：

无效的json字符串，错误的json，代码格式和问题标点很烦人。请修复。另请阅读How to Ask。使用 jsonlint.com 验证正确的 json 字符串。
请检查并清理您的问题，至少要正确拼写 JSON！而且标记错了，这里没有PHP，只有Javascript！
@ADyson，感谢您的更正，但实际上是拼写错误和标签，最初问题中有一个 php 代码，但我删除它以使其简单，所以我从未更改标签当我编辑问题时，如果您仍然可以帮助解决问题，我会很高兴。
好吧，你现在可以编辑标签了，你知道的，那么更多有 JS 专业知识的人会看到它。我制作了这些 cmets，以便您可以纠正错误并改进问题，使其更容易回答。
您的错误的原因将是因为代码对数据结构做出了不正确的假设。您是否使用浏览器内置的 Javascript 调试器来单步执行代码并检查每行变量的值？它应该可以更容易地查看逻辑错误的位置。

标签： javascript jquery html json

【解决方案1】：

本质上问题是每次运行for 循环时都会覆盖level_1 和level_2 变量。因此，当您看到制作 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>

【讨论】：