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, stackoverflow.com/questions/7545641/…. — user4573148
– user4573148, Commented Jun 12, 2018 at 15:40
just an example if there is different option type in different option — Red Wing Justice Chan
– Red Wing Justice Chan, Commented Jun 12, 2018 at 16:33

Eddie · Accepted Answer · 2018-06-12 15:38:02Z

1

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>

answered Jun 12, 2018 at 15:38

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leonid Pyrlia · Accepted Answer · 2018-06-12 15:51:38Z

1

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

}, '');

answered Jun 12, 2018 at 15:51

Leonid Pyrlia

1,7322 gold badges12 silver badges16 bronze badges

Comments

Muhammad Seerat Awan · Accepted Answer · 2018-06-12 16:37:42Z

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, 2018 at 16:37

answered Jun 12, 2018 at 16:30

Muhammad Seerat Awan

907 bronze badges

2 Comments

Muhammad Seerat Awan Over a year ago

I just simply make two arrays within the array.

Red Wing Justice Chan Over a year ago

Thanks. That is what I want. Really help me a lot.

dgeare · Accepted Answer · 2018-06-12 15:44:08Z

0

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>

answered Jun 12, 2018 at 15:44

dgeare

2,6585 gold badges21 silver badges30 bronze badges

Comments

Jonas Wilms · Accepted Answer · 2018-06-12 15:44:50Z

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, 2018 at 15:44

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

answered Jun 12, 2018 at 15:42

scetiner

3613 silver badges9 bronze badges

1 Comment

Jonas Wilms Over a year ago

What is "something like this" ?

Emeeus · Accepted Answer · 2018-06-12 17:03:59Z

0

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.

answered Jun 12, 2018 at 17:03

Emeeus

5,2922 gold badges30 silver badges42 bronze badges

Collectives™ on Stack Overflow

For Loop with two array in javascript

6 Answers 6

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related