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.

Answer 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>

Answer 2

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

Answer 3

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>

Answer 4

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