JavaScript如何提取JSON对象嵌套数组数据并填充至div？

嗨，别担心，作为JavaScript新手遇到这种嵌套结构的遍历问题太正常啦！我来一步步教你怎么把所有内层的值填充到div里。

首先，你的JSON对象是一个外层包含三个键（a、b、c）的对象，每个键对应一个数组，我们需要先遍历外层的键，再遍历每个键对应的数组，把里面的元素取出来放到div里。

方法一：使用for...in循环（直观易懂，适合新手） #

这是最基础的遍历方式，逻辑清晰，容易上手：

// 你的原始对象
var ob = { "a":[ "a1", "a2" ], "b":[ "b1", "b2" ], "c":[ "c1", "c2" ] };

// 获取要填充内容的目标div（假设div的id是"targetDiv"）
var targetDiv = document.getElementById("targetDiv");

// 遍历外层对象的每个键
for (var key in ob) {
  // 确保只遍历对象自身的属性（避免拿到原型链上的额外属性）
  if (ob.hasOwnProperty(key)) {
    // 获取当前键对应的内层数组
    var innerArray = ob[key];
    // 遍历数组里的每个元素
    for (var i = 0; i < innerArray.length; i++) {
      var item = innerArray[i];
      // 创建一个p标签存放内容，再添加到div中
      var contentItem = document.createElement("p");
      contentItem.textContent = item;
      targetDiv.appendChild(contentItem);

      // 如果你想直接追加文本，也可以用这种写法：
      // targetDiv.innerHTML += `<p>${item}</p>`;
    }
  }
}

方法二：使用Object.keys()结合forEach（更现代简洁的写法） #

如果你想让代码更简洁，可以用ES5之后的API来实现：

var ob = { "a":[ "a1", "a2" ], "b":[ "b1", "b2" ], "c":[ "c1", "c2" ] };
var targetDiv = document.getElementById("targetDiv");

// 先拿到外层对象的所有键，再逐个遍历
Object.keys(ob).forEach(function(key) {
  // 获取当前键对应的数组
  var innerArray = ob[key];
  // 遍历数组中的每个元素
  innerArray.forEach(function(item) {
    var contentItem = document.createElement("p");
    contentItem.textContent = item;
    targetDiv.appendChild(contentItem);
  });
});

关键步骤解释 #

1. 定位目标div：先通过getElementById（或其他选择器）拿到你要填充内容的div元素，这是内容的容器。
2. 遍历外层对象：不管用for...in还是Object.keys()，核心都是拿到a、b、c这三个键，从而访问到对应的内层数组。
3. 遍历内层数组：拿到数组后，用循环逐个取出a1、a2这类元素，再把它们添加到div里——你可以创建新标签，也可以直接追加文本，根据自己的需求选择就行。

如果之后想给不同键对应的元素加不同样式（比如a组的内容标红），还可以在遍历外层键的时候，根据key值给元素添加对应的class哦～

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