div json循环,代码示例

1、div json循环是指通过遍历一个json对象中的数据，并将数据动态地插入到HTML页面的div元素中。这样可以实现根据数据的数量动态生成相应数量的div元素，并将数据展示在页面上。

示例代码如下：

// 假设有一个json对象
var jsonData = {
  "data": [
    {
      "name": "张三",
      "age": 20
    },
    {
      "name": "李四",
      "age": 25
    },
    {
      "name": "王五",
      "age": 30
    }
  ]
};
// 遍历json对象中的数据
for (var i = 0; i < jsonData.data.length; i++) {
  // 创建一个div元素
  var divElement = document.createElement("div");
  // 将json数据中的name和age属性值作为div的内容
  divElement.innerHTML = "姓名：" + jsonData.data[i].name + "，年龄：" + jsonData.data[i].age;
  // 将div元素插入到页面中的某个容器中
  document.getElementById("container").appendChild(divElement);
}

上述示例代码中，首先定义了一个json对象`jsonData`，其中包含了一个名为"data"的数组，数组中包含了多个对象，每个对象都有"name"和"age"属性。

然后通过for循环遍历json对象中的数据，每次循环都会创建一个div元素`divElement`，并将当前数据的"name"和"age"属性值作为div的内容。将这个div元素插入到页面中id为"container"的容器中。

通过这样的循环操作，可以根据json对象中数据的数量动态地生成相应数量的div元素，并将数据展示在页面上。