CODEWITHSUNDEEP
javascript
sWarren
sWarren

Reputation: 473

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

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.

Upvotes: 2

Views: 212

Answers (4)

Luca Kiebel
Luca Kiebel

Reputation: 10096

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>

Upvotes: 0

Void Spirit
Void Spirit

Reputation: 909

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

Upvotes: 0

zfrisch
zfrisch

Reputation: 8660

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>

Upvotes: 1

Juan Elfers
Juan Elfers

Reputation: 780

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

Upvotes: 0

Related Questions