creating dynamic dropdown based on json data

Question

I have a json data like this.

data = [{"value": "One", "value2": "1"},
{"value": "Two", "value2": "2"},
{"value": "Three", "value2": "3"},
{"value": "Four", "value2": "4"}]

I want to create dropdown with label of value and data-value of value2.

I'm able to create a dropdown by passing any one single column to a array like this.

chart_data = [];

data.forEach(function(d) {
   chart_data.push(d.value)
})

["one","two","three"] // result

With that result I create a dropdown using jquery's $.each() function.

$.each(chart_data, function(i, val) {
       $('#dropdown').append('' + val + '');
})

But over there I'm able to create using only single column.

I'm looking to create a dropdown from two column values with 1 col for the label and other for the data-value.

When you say 'dropdown' do you mean a `select` element, or another plugin? — Rory McCrossan, May 08 '14 at 07:17
@RGraham - I'm trying with the link you've given. But I have a challenge. When I'm about to append. My col has a space in the col name `value word`. How can I target it? I'm not able to enclose with this `'`. — Unknown User, May 08 '14 at 07:25

score 0 · Answer 1 · answered May 08 '14 at 07:28

0

Try this

data.forEach(function(d) {
  var option = "<option value='"+d.value2+"'>"+d.value+"</option>";
  $('#dropdown').append(option);
})

answered May 08 '14 at 07:28

Bhushan Kawadkar

score 0 · Answer 2 · edited May 08 '14 at 07:47

0

You really don't need to make a single array, I don't know why you are making that

Simply use your data field to populate your dropdown

$.each(data, function(i, obj) {
   $('#dropdown').append(new Option(obj.value, obj.value2));
});

edited May 08 '14 at 07:47

prakash2089

answered May 08 '14 at 07:29

progrAmmar

score 0 · Answer 3 · answered May 08 '14 at 07:30

0

Run the each on your data array.

$.each(data, function(i, o) {
  $('#dropdown').append('<option value="' + o.value + '">' + o.value2 + '</option>');
});

answered May 08 '14 at 07:30

Lee

3 Answers3