CODEWITHSUNDEEP
javascriptjqueryarrays
matt
matt

Reputation: 97

Select Specific Elements in Array for Dropdown

I am trying to use JavaScript and jQuery to generate a dropdown list from the values in one particular element of an array.

My array is defined as a variable and looks like this:

var ht_parties = [
  {
    "id_Group": "41DC3C63-F423-4941-ACF7-63118BD9CE19",
    "name": "Ayiti An Aksyon",
    "nameAbbreviated": "AAA",
    "nameAcronym": "AAA"
  },
  {
    "id_Group": "9AF9E215-0376-460F-B69A-F380F35729CA",
    "name": "ACAAU",
    "nameAbbreviated": "ACAAU",
    "nameAcronym": "ACAAU"
  } 
]

The code to generate the dropdown is as follows:

var select = document.getElementById("selectNumber"); 
var options = ht_parties; 

for ( var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.text = opt;
    el.value = opt;
    select.appendChild(el);
};

I want the dropdown to populated with the values of the array element "name". However, this is currently generating a dropdown with the list items as "[object Object]". How do I select only the element "name" from the array and populate the dropdown with it?

Upvotes: 0

Views: 46

Answers (2)

abs
abs

Reputation: 801

use this

var select = document.getElementById("selectNumber"); 
var options = ht_parties; 

for ( var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.text = opt.name;
    el.value = opt.name;
    select.appendChild(el);
};

Upvotes: 0

PhilVarg
PhilVarg

Reputation: 4820

you need to specify which key on opts you want to set to the el's text and value

el.text = opt;
el.value = opt;

needs to be something like

el.text = opt.name;
el.value = opt.name;

(or whichever keys you want to set)

Upvotes: 3

Related Questions