How can I populate a HTML dropdown with nested arrays, using JS?

Question

I want to populate a dropdown menu using this array. I only want the 'planets' to be on the dropdown, not the numbers. I think it might roughly look like this :

for (var i = 0; i < arr.length; i++) {
  var option = document.createElement("OPTION"),
    txt = document.createTextNode(arr[i]);
  option.appendChild(txt);
  option.setAttribute("value", arr[i]);
  select.insertBefore(option, select.lastChild);
}

But I am not sure how to access the planets only...

var planets = [
  ['Pluto', 0.06],
  ['Neptune', 1.148],
  ['Uranus', 0.917],
  ['Saturn', 1.139],
  ['Jupiter', 2.640],
  ['Mars', 0.3895],
  ['Moon', 0.1655],
  ['Earth', 1],
  ['Venus', 0.9032],
  ['Mercury', 0.377],
  ['Sun', 27.9]
];

Thank you.

@LucaKiebel I don't think the moon or the Sun are planets, either... — VLAZ
– VLAZ, Commented Sep 27, 2018 at 20:05

zfrisch · Accepted Answer · 2018-09-27 20:46:27Z

1

You can use array destructuring to pull your inner array into the variables textContent and value immediately, and then apply them to an option element using Object.assign

planets.forEach( ( [ textContent, value ] ) => { 
  let option = Object.assign(document.createElement( "OPTION" ), {textContent, value});
  select.appendChild( option ) 
});

var select = document.querySelector("select"), planets = [['Pluto', 0.06],['Neptune', 1.148],['Uranus', 0.917],['Saturn', 1.139],['Jupiter', 2.640],['Mars', 0.3895], ['Moon', 0.1655],['Earth', 1], ['Venus', 0.9032], ['Mercury', 0.377],['Sun', 27.9]];



planets.forEach( ( [ textContent, value ] ) => { 
  let option = Object.assign( document.createElement( "OPTION" ), { textContent, value } );
  select.appendChild( option ) 
});

<select></select>

answered Sep 27, 2018 at 20:46

zfrisch

8,6901 gold badge26 silver badges39 bronze badges

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

1 Comment

sWarren Over a year ago

This is a very nice solution. Thank you very much, zfrisch!

Juan Elfers · Accepted Answer · 2018-09-27 20:24:00Z

0

I think this is what you are needing:

for(var i = 0; i < arr.length; i++) {
  var option = document.createElement("option"),
  // Note that I've added a [0]. That's because arr[i] is still an array that contains the "planet" name ([0]) and the value ([1]) (on first and second position respectively)
  // I've also added the "var" keyword to avoid generating a global variable with txt
  var txt = document.createTextNode(arr[i][0]);
  option.appendChild(txt);
  // Here too! The [1] was needed to get the value
  option.setAttribute("value", arr[i][1]);
  select.insertBefore(option, select.lastChild);
}

edited Sep 27, 2018 at 20:24

answered Sep 27, 2018 at 20:07

Juan Elfers

7807 silver badges14 bronze badges

Comments

Luca Kiebel · Accepted Answer · 2020-01-24 13:49:20Z

0

Because you have an Array inside of an Array. So you have to iterate twice to get all values or once if you want to hard code it.

 for(i = 0; i < arr.length; i++){
     var value = arr[i][0]
 }

edited Jan 24, 2020 at 13:49

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

answered Sep 27, 2018 at 20:09

Void Spirit

9091 gold badge6 silver badges19 bronze badges

1 Comment

Void Spirit Over a year ago

Please, write the reason to downvote when you are doing so. Thanks!

Luca Kiebel · Accepted Answer · 2020-01-24 15:13:25Z

0

You have to access the values from the inner array, if you want to get the name or the value.

arr[i][0] is the name, and arr[i][1] is the value:

var arr = [['Pluto', 0.06],['Neptune', 1.148],['Uranus', 0.917],['Saturn', 1.139],['Jupiter', 2.640],['Mars', 0.3895],['Moon', 0.1655],['Earth', 1],['Venus', 0.9032],['Mercury', 0.377],['Sun', 27.9]];

let select = document.querySelector("select")

for (var i = 0; i < arr.length; i++) {
  var option = document.createElement("OPTION"),
    txt = document.createTextNode(arr[i][0]);
  option.appendChild(txt);
  option.setAttribute("value", arr[i][1]);
  select.insertBefore(option, select.lastChild);
}

<select></select>

edited Jan 24, 2020 at 15:13

answered Sep 27, 2018 at 20:08

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

1 Comment

Luca Kiebel Over a year ago

Sure thing, glad to help!

Collectives™ on Stack Overflow

How can I populate a HTML dropdown with nested arrays, using JS?

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related