如何遍历特定结构JSON数据并在<dl>标签中展示？

我明白你是想把这段JSON数组的内容对应渲染到HTML的定义列表标签里对吧？先帮你补全下合理的数据结构（方便示例），假设你的mydata大概是这样的：

var mydata = [
  { "id": "67", "name": "Baby & Toddler Clothing " }, 
  [
    { "id": "sub1", "name": "Onesies" },
    { "id": "sub2", "name": "Pajamas" },
    [
      { "id": "subsub1", "name": "Organic Onesies" }
    ]
  ]
];

核心实现思路 #

1. 先创建<dl>容器——HTML语义明确要求<dt>和<dd>必须放在<dl>内部才规范
2. 提取mydata[0]的内容，渲染到<dt>标签中
3. 处理mydata[1]这个多维数组，遍历所有层级的子元素，逐个生成对应的<dd>标签

原生JavaScript实现代码 #

// 创建<dl>容器
const dlContainer = document.createElement('dl');

// 处理<dt>：展示mydata[0]的名称（想展示id就替换成mydata[0].id）
const dtElement = document.createElement('dt');
dtElement.textContent = mydata[0].name;
dlContainer.appendChild(dtElement);

// 处理多维数组mydata[1]：先扁平化所有嵌套层级，再遍历
const flattenedItems = mydata[1].flat(Infinity);
flattenedItems.forEach(item => {
  const ddElement = document.createElement('dd');
  ddElement.textContent = item.name;
  dlContainer.appendChild(ddElement);
});

// 把最终的<dl>添加到页面中（这里示例添加到body，你可以换成自己的目标容器）
document.body.appendChild(dlContainer);

针对分组式多维数组的调整 #

如果你的mydata[1]是按组嵌套的（比如每个子数组是一组相关选项），不需要扁平化的话，可以直接嵌套遍历：

// 不扁平化，直接遍历每一层分组
mydata[1].forEach(group => {
  group.forEach(item => {
    const ddElement = document.createElement('dd');
    ddElement.textContent = item.name;
    dlContainer.appendChild(ddElement);
  });
});

你之前可能踩坑的点 #

• 没把<dt>和<dd>放在<dl>容器里，导致渲染后不符合HTML规范
• 没有处理多维数组的嵌套，只遍历了外层数组，没深入到子元素
• 访问对象属性时写错了名称（比如把name写成Name，JS是大小写敏感的）

内容的提问来源于stack exchange，提问作者sam