jQuery循环遍历多维数组并显示每个父数组的子数组

Question

我有一个多维数组，里面有对象和东西。
现在它很容易在父数组中循环并在 html 中显示。
但我的问题是假设我们的数组里面有 5 个数组，当我在第一个循环中编写第二个循环时，每个 5 个数组里面有 10 个数组。
现在 5 个数组中的每一个都显示 50 个数组。

var data = [{
    level_one: "outer-array-data-1",
    second_level_one: {
        level_two: [{"1":"1"}, {"2":"2"}, {"3":"3"}]
        }
    },
    {
    level_one: "outer-array-data-2",
    second_level_one: {
        level_two: [{"1":"4"}, {"2":"5"}, {"3":"6"}]
        }
    },
    {
    level_one: "outer-array-data-3",
    second_level_one: {
        level_two: [{"1":"7"}, {"2":"8"}, {"3":"9"}]
        }
    }
];

$.each(data, function(i, value) {
    // display value in a html tag (parent-class) 
    $.each(value['second_level_one']['level_two'], function(i, elem) {
        // append elem the data to (parent-class)
    });
});

所以我希望 outer-array-data-1 在 html 中显示带有 1,2,3 等等...但我得到所有 1,2,3,4,5,6,7,9 的每个 data。
我试过for、i++ 和elem.map()，但我想不通。 （对数组感到抱歉。感谢您的帮助）

Answer 1

您可以遍历您的 json 数组并将该值附加到某个变量中以获得所需的结果。

演示代码：

var data = [{
    level_one: "outer-array-data-1",
    second_level_one: {
      level_two: [{
        "1": "1"
      }, {
        "2": "2"
      }, {
        "3": "3"
      }]
    }
  },
  {
    level_one: "outer-array-data-2",
    second_level_one: {
      level_two: [{
        "1": "4"
      }, {
        "2": "5"
      }, {
        "3": "6"
      }]
    }
  },
  {
    level_one: "outer-array-data-3",
    second_level_one: {
      level_two: [{
        "1": "7"
      }, {
        "2": "8"
      }, {
        "3": "9"
      }]
    }
  }
];


var htmls = "";
$.each(data, function(key, value) {
  //append level one
  htmls += "<div class='parent'><h3>" + value.level_one + "</h3>"
  $.each(value.second_level_one.level_two, function(index, data) {
    //loop through json array need this loop because json array..
    $.each(data, function(index, datas) {
      //append childs
      htmls += "<div class='child'>" + datas + "</div>"

    })
  })
  htmls += "</div>"

})

$("#something").html(htmls)

.child {
  color: blue
}

.parent {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="something"></div>

Answer 2

我不知道这是否是所需的输出，但您可以创建一个这样的 if 语句：

for (var i = 0; i < data.length; i++) {
  if(data[i].level_one = 'outer-array-data-1'){
    var temp = data[i].second_level_one.level_two;
      console.log(temp[i])
  }
}

结果你得到这个：

{
  1: "1"
}
{
  2: "5"
}
{
  3: "9"
}

var data = [{
    level_one: "outer-array-data-1",
    second_level_one: {
        level_two: [{"1":"1"}, {"2":"2"}, {"3":"3"}]
        }
    },
    {
    level_one: "outer-array-data-2",
    second_level_one: {
        level_two: [{"1":"4"}, {"2":"5"}, {"3":"6"}]
        }
    },
    {
    level_one: "outer-array-data-3",
    second_level_one: {
        level_two: [{"1":"7"}, {"2":"8"}, {"3":"9"}]
        }
    }
];

for (var i = 0; i < data.length; i++) {
  if(data[i].level_one = 'outer-array-data-1'){
    var temp = data[i].second_level_one.level_two;
      console.log(temp[i])
  }
}