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

Posted 2023-05-09

【中文标题】jQuery循环遍历多维数组并显示每个父数组的子数组

【英文标题】：jQuery loop through multidimensional array and display children's for each parent array

【发布时间】：2021-05-06 15:13:15

【问题描述】：

我有一个多维数组，里面有对象和东西。 现在它很容易在父数组中循环并在 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()，但我想不通。 （对数组感到抱歉。感谢您的帮助）

【参考方案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>

【参考方案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])
  

【讨论】：

这不是我们想要的，所需的输出将类似于outer-array-data-1 以及1,2,3 和outer-array-data-2 以及4,5,6 和outer-array-data-3 和7,8,9。