Array to drop down list value not displayed

Question

I want to display an array in select option drop down list

var data =  [
      { 
       "batch_number": "WJ0771104"
      },
      { 
       "batch_number": "WJ0771104"
      },
      { 
       "batch_number": "WJ0771104"
      }
    ];
var select = document.getElementById("rec_mode");
for(index in data) {
 console.log(index);
  select.options[select.options.length] = new Option(data[index], index);
}

<select id="rec_mode"></select>

but i get the list with empty values inside. i can see drop down has expanded but no value inside.
any thing im doing wrong here

May we know what does this print you on console? (what is the value of index).. And also, in this context what is "data" and what is "myobject" ? — Brank Victoria, Dec 07 '18 at 08:47
There is no JSON in this question. I'd suggest you look up what [JSON actually is](https://www.json.org/) — Liam, Dec 07 '18 at 08:51
Then why you use `myobject[index]` instead of `data[index].batch_numer` if you want to show the `batch_number` value of each item in the array? — Brank Victoria, Dec 07 '18 at 08:51
this code won't run, what is `myobject`? Please create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) of your problem — Liam, Dec 07 '18 at 08:56
i used this select.options[select.options.length] = new Option(data[index].batch_number, index); it worked thanks — kevin, Dec 07 '18 at 08:57
I'd also suggest you look at your `for...in...` syntax, it [isn't doing what you think it's doing](https://stackoverflow.com/a/3010848/542251) — Liam, Dec 07 '18 at 08:58

score 0 · Accepted Answer · answered Dec 07 '18 at 08:58

0

I am trying to get your result

var data =[
  { 
   "batch_number": "WJ0771104"
  },
  { 
   "batch_number": "WJ0771104"
  },
  { 
   "batch_number": "WJ0771104"
  }
];
var select = document.getElementById("rec_mode");
for(index in data) {
console.log(index);
console.log(data[index].batch_number);
select.options[select.options.length] = new Option(data[index].batch_number, index);
}

<select id="rec_mode"></select>

answered Dec 07 '18 at 08:58

AJAY MAURYA

541
3
11

`I am trying to get your result` is not an answer. – cнŝdk Dec 07 '18 at 09:02
Sorry, I did not understand what you want to say – AJAY MAURYA Dec 07 '18 at 09:06
I meant using only code with no explanations is not a good answer, after all the purposse of answering is to provide helpful insights for people and not just earn rep. – cнŝdk Dec 07 '18 at 09:10
Ok, Next time i will remember this. – AJAY MAURYA Dec 07 '18 at 09:11
@chŝdk hi what if i wan to add select all to the drop down list? – kevin Dec 07 '18 at 09:54
@kevin What do you mean? Sorry I don't get it. – cнŝdk Dec 07 '18 at 13:22

score 0 · Answer 2 · edited Dec 07 '18 at 09:11

0

Try using a for each loop on the data array instead.

Here try this.

var data = [{
    "batch_number": "WJ0771104"
  }, {
    "batch_number": "WJ0771104"
  },
  {
    "batch_number": "WJ0771104"
  }
]
var select = document.getElementById("rec_mode");
data.forEach((doc) => {
  var opt = document.createElement('option');
  opt.value = opt.text = doc["batch_number"];
  select.add(opt);
})

<select id="rec_mode"></select>

edited Dec 07 '18 at 09:11

cнŝdk

31,391
7
56
78

answered Dec 07 '18 at 09:07

Lavi

27
1
6

hi what if i wan to add select all to the drop down list? – kevin Dec 07 '18 at 09:54

Array to drop down list value not displayed

2 Answers2