For Loop with two array in javascript

Question

I am new in js and have this problem. I have two arrays and like to achieve this layout by using for loop. I do not know how to write this to achieve it. Here is my code. Please help.

var html ='';
var option = ['meal', 'drink'];
var option_type = ['big', 'medium', 'small', 'big', 'medium'];

for (var i in option){
    for ( var j in option_type){
        html += '<div>'+ option[i] + '</div>'+'<p>'+option_type[j]+'</p>';
    }
}

.(class).html(html);

You can use this concept for javascript arrays, https://stackoverflow.com/questions/7545641/javascript-multidimensional-array. — , Jun 12 '18 at 15:40
just an example if there is different option type in different option — Red Wing Justice Chan, Jun 12 '18 at 16:33

score 1 · Answer 1 · answered Jun 12 '18 at 15:38

You can use for like:

var html = '';
var option = ['meal', 'drink'];
var option_type = ['big', 'medium', 'small'];

for (i = 0; i < option.length; i++) {
  html += '<div>' + option[i] + '</div>';        //Add option here (header)
  for (j = 0; j < option_type.length; j++) {
    html += '<p>' + option_type[j] + '</p>';     //Add option_type 
  }
}

$('body').html(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 1 · Answer 2 · answered Jun 12 '18 at 15:51

An object data structure is better for representing what you want (at least based on the screenshot)

var options = {
    meal: ['big', 'medium', 'small'],
    drink: ['big', 'medium']
}

var html = Object.keys(options).reduce((all, option) => {

    var headerMarkup = `<div>${option}</div>`;
    var itemsMarkup = options[option].map(item => `<p>${item}</p>`).join('');

    return `${all}${headerMarkup}${itemsMarkup}`;

}, '');

score 0 · Answer 3 · edited Jun 12 '18 at 15:44

0

option_type is useless and not logical, try something like this

var html ='';
var option = {
  'meal': [
    'big',
    'medium',
    'small'
  ],
  'drink': [
    'big',
    'medium'
  ]
};


for (var key in option){
    html += '<div>'+ key + '</div>'
    for ( var j of option[key]){
        html += '<p>'+j+'</p>';
    }
}

.(class).html(html);

edited Jun 12 '18 at 15:44

Jonas Wilms

132,000
20
149
151

answered Jun 12 '18 at 15:42

scetiner

361
3
9

What is "something like this" ? – Jonas Wilms Jun 12 '18 at 15:45

score 0 · Answer 4 · answered Jun 12 '18 at 15:44

this is the direct answer to how to use nested for loops. But if you want to vary the option_types for each option, you will probably want to use an object as suggested by scetiner

var html ='';
var option = ['meal', 'drink'];
var option_type = ['big', 'medium', 'small'];

for (var i in option){
  html += '<div><h1>'+ option[i] + "<h1>";
    for ( var j in option_type){
      html +=  '<p>'+option_type[j]+'</p>';
    }
  html += '</div>';
}

document.getElementById('container').innerHTML = html;

#container{
  
}
h1{
}
#container p{
  display:inline-block;
  margin:10px;
  border:1px solid #333;
  min-width: 100px;
  padding:10px;
}

<div id='container'></div>

Muhammad Seerat Awan · Accepted Answer · 2018-06-12T16:37:42.193

0

You can do something like this:

var html ='';

var option = [
  ['meal', 'big', 'medium', 'small'],
  ['drink', 'big', 'medium' ]
];

for (var i = 0; i < option.length; i++){
    var option_type = option[i];
    
    html += '<div>' + option_type[0] + '</div>';
    
    for(var j = 1; j < option_type.length; j++) {
         html += '<span>' + option_type[j] + '</span>';
    } 
}

document.getElementById('container').innerHTML=html;

#container span{
     display:inline-block;
     margin-right:10px;
     border:1px solid #333;
     padding:10px;
}

<div id="container"></div>

edited Jun 12 '18 at 16:37

answered Jun 12 '18 at 16:30

Muhammad Seerat Awan

70
7

I just simply make two arrays within the array. – Muhammad Seerat Awan Jun 12 '18 at 16:40
Thanks. That is what I want. Really help me a lot. – Red Wing Justice Chan Jun 15 '18 at 16:53

score 0 · Answer 6 · answered Jun 12 '18 at 17:03

Followin you approach here a full example: https://jsfiddle.net/57q39xre/17/

The key is:

for (var i in parent){
//parent code
    for ( var j in child){
      //parent and child code 
    }    
  //parent code  
}

Each parent will iterate each child.

For Loop with two array in javascript

6 Answers6