Home Loop over nested array and render divs with values
Reply: 0

Loop over nested array and render divs with values

user1192
1#
user1192 Published in April 26, 2018, 5:21 pm

I have an array which looks somewhat like this:

arr = [
  ["10", "1", "1200", "630"],
  ["272", "45", "654", "654"],
  ["10", "139", "367", "372"],
  ["825", "134", "369", "371"]
];

The values inside of each array are params (x, y, width, height) for a div I want to render. So e.g. the first div should have the props:

left: 10,
top: 1,
width: 1200,
height: 630

My current implementation looks like this:

for (var i = 0; i < arr.length; i++) {
      $('<div/>', {
          class: 'class-' + i
        }).appendTo($('body'));
      for (var j = 0; j < arr[i].length; j++) {
            $('.class-' + i).css({
                position: 'absolute',
                left: arr[i][j],
                top: arr[i][j],
                width: arr[i][j],
                height: arr[i][j]
         });
     }
}

So in this case I would like to create 4 different divs for each array with the proper CSS styles given in each array. Unfortunately it is not working, because I face some issues with indexing.

Do you have an idea how to solve this?

Thanks!

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.353992 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO