JQuery fill DropDownList with JSON data

Question

Let's say I have this data returned from a backend service layer:

["2", "3", "7", "14"]

First question. Is this considered valid JSON data? Json.org says it is, but I cannot find any references to it on Google, SO, etc...

An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

I want to be able to take these values and add them to an already existing DropDownList object OnLoad using JQuery.

$.getJSON("http://www.example.com/path-to-get-data", function(data) { 
  //iterate through each object and add it to the list.
  //ideally, the key and value (string to display to the end user) would be the same.
});

I took a look at this thread, but it has objects, not just an array. Should I use parseJSON versus getJSON?

Thanks in advance!

I believe this is not valid , valid JSON will be something like {"key:“2”, "key":“3”, "key":“7”, "key":“14”} — Satya
– Satya, Commented Sep 28, 2013 at 3:33
$.parseJSON('["2", "3", "7", "14"]') will return an array. Better use getJSON and iterate through each item in the array and add it to your object — MayThrow
– MayThrow, Commented Sep 28, 2013 at 3:54

Blaise · Accepted Answer · 2016-03-29 12:09:14Z

13

var arr = [ 2, 3, 7, 14];
$.each(arr, function(index, value) {
     ('#myselect').append($('<option>').text(value).attr('value', index));
});

Please also take a look at Mr. C's solution:

$('<option></option>').val(item).html(item)

His way of manipulating options is new to me, and more elegant.

edited Mar 29, 2016 at 12:09

answered Sep 28, 2013 at 3:35

Blaise

22.4k29 gold badges112 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kurkula Over a year ago

It threw "Object doesnot support .append"

Blaise Over a year ago

What is your version of jQuery and what is your browser?

Blaise Over a year ago

$.append is available since very early version. Is your DOM selector (that $('#myselect') part) right?

Ian D. Rossi Over a year ago

There's a small typo on line 3 of this answer, that I caught. The $ in front of ('#myselect).append($('<option>').text(value).attr('value', index)); is missing. This was very helpful, thanks.

Community · Accepted Answer · 2017-05-23 12:03:05Z

11

My solution was based off of Blaise's idea.

//populate the Drop Down List
$.getJSON("http://www.example.com/api/service", function (data) {
     $.each(data, function (index, item) {
         $('#dropDownList').append(
              $('<option></option>').val(item).html(item)
          );
     });
 });

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Sep 30, 2013 at 20:06

Mr. C

1,7202 gold badges17 silver badges24 bronze badges

Comments

Rodion Shotskiy · Accepted Answer · 2013-09-28 03:43:22Z

2

This is not correct JSON, it must be this style:

{"0": "2", "1" : "3", "2" : "7", "3" : "14"}

You could use that sample to procceed you response:

var response = "[2, 3, 7, 14]";
eval("var tmp = " + response); 
console.log(tmp);

answered Sep 28, 2013 at 3:43

Rodion Shotskiy

274 bronze badges

Comments

Deepak Kothari · Accepted Answer · 2014-05-22 13:42:02Z

This is the HiddenField declaration,which is useful to Store The JSON String

   <asp:HiddenField ID="hdnBankStatus" runat="server" />

This is the Dropdownlist declaration

   <select id="optStatus" name="optStatus" runat="server">
        </select>

These lines will initialize Hiddenfield value with the sorted list(Assume that list contains the key value pairs in sorted order) which is then serialized using JSON serializer

   sl = new SortedList();
   hdnBankStatus.Value = jsonSerialiser.Serialize(sl);

These lines will use Elements of JSON String One by one and populate the dropdown with Values.

   $(document).ready(function () {  

   var myOptions = $.parseJSON($('#hdnBankStatus').val());
        var mySelect = $('#optStatus');
        $.each(myOptions, function (val, text) {
            mySelect.append(
    $('<option></option>').val(text).html(val)
        );
        });
   }

Botlhale Jonathan Matlou · Accepted Answer · 2017-10-12 12:23:18Z

0

 var arr = [ 2, 3, 7, 14];
 var dropdown = ('#myselect');
 dropdown.empty();
 dropdown.append($('<option value=''>--Please Select--</option>'));
 $.each(arr, function(index, value) {
 dropdown.append($('<option value='+index+'>'+value+'</option>'));
 });`

answered Oct 12, 2017 at 12:23

Botlhale Jonathan Matlou

591 silver badge4 bronze badges

1 Comment

Botlhale Jonathan Matlou Over a year ago

This should do it

Michael Irigoyen · Accepted Answer · 2015-07-22 13:46:27Z

-4

For me, this one worked.

$("#ddlCaseType").append("<option>" + txt + "</option>");

edited Jul 22, 2015 at 13:46

Michael Irigoyen

23.1k18 gold badges92 silver badges132 bronze badges

answered Jul 22, 2015 at 10:47

Sushama Pradhan

11 bronze badge

1 Comment

Sushama Pradhan Over a year ago

$("#ddlCaseType").append("<option>" + txt + "</option>");

Collectives™ on Stack Overflow

JQuery fill DropDownList with JSON data

6 Answers 6

4 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related