jQuery loop through multidimensional array and display children's for each parent array

Question

i have an multidimensional array with objects and stuff inside it.
now its easy to loop trough the parent array and display it in html.
but my problem is lets say our array has 5 array inside of it and also each 5 arrays has 10 array inside them when i write the second loop inside the first one this happens.
now each one of 5 arrays displaying 50 arrays.

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)
    });
});

so i expect to get outer-array-data-1 shows inside html with 1,2,3 and so on... but i get all 1,2,3,4,5,6,7,9 for each of data.
i tried for,i++ and elem.map() but i couldn't figure this out. (sorry about the array.thanks for any help)

Swati · Accepted Answer · 2021-02-02 13:18:05Z

You can iterate through your json arrays and append that values in some variable to get required result .

Demo Code :

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>

Rotan075 · Accepted Answer · 2021-02-02 12:45:55Z

0

I do not know if this is the desired output but what you could do is create an if statement like this:

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])
  }
}

As a result you get this:

{
  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])
  }
}

answered Feb 2, 2021 at 12:45

Rotan075

2,6155 gold badges37 silver badges56 bronze badges

1 Comment

Ramiel Over a year ago

well it's not what we want exactly, the desired output will be like outer-array-data-1 along with 1,2,3 and outer-array-data-2 with 4,5,6 and outer-array-data-3 with 7,8,9.

Collectives™ on Stack Overflow

jQuery loop through multidimensional array and display children's for each parent array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related