jQuery append option in select dropdown from json

Question

$.getJSON('js/countries.json', function (data) {
            $.each(data, function (i=0,name,code) {
                // console.log(data[i]['name'] + '=' + data[i]['code']);
                $('#ppState').append($('<option>', {
                    value: data[i]['code'],
                    text: data[i]['name']
                }));
            });
        });

Can anybody tell why this code is not working? It does not append any options in my select html output. Console works just fine.

HTML code:

<select id="ppState" name="ppState">
    <option value="">Choose Country</option>
</select>

JSON file:

[
  {
    "name": "Afghanistan",
    "code": "AF"
  },
  {
    "name": "Åland Islands",
    "code": "AX"
  },
  {
    "name": "Albania",
    "code": "AL"
  }

]
enter code here

EDIT:

It appending options in the first select element that jQuery selector finds. However I have several same select element in the html. How to target them all?

Answer 1

Your jQuery each function and the formatting of your appear option is not correct.

// yours.......
$.each(data, function (i=0,name,code) {
                // console.log(data[i]['name'] + '=' + data[i]['code']);
                $('#ppState').append($('<option>', {
                    value: data[i]['code'],
                    text: data[i]['name']
                }));
            });


// should
$.each(data, function (item) {
    var opt = $('<option></option>');

    opt.val(item.code);
    opt.text(item.name);

    $('#ppState').append($(opt);
  });

Update

$.each(data, function (item) {
    $('#ppState').append($('<option value="' +item.code+ '">' +item.name+ '</option>'));
  });

Answer 2

Your code works well for me.

I had wrong characters for the Åland Islands in the dropdown list, so I had to re-save the JSON file, changing from ANSI to UTF-8.

Answer 3

It appending options in the first select element that jQuery selector finds. However I have several same select element in the html. How to target them all?

If you've reused the same id attribute then your HTML is invalid, and jQuery will find only the first (as you've seen).

It is valid to give multiple elements the same name attribute, so if your elements all have name="ppState" then you can select by that:

$('select[name="ppState"]').append(...

Or you can add a common class to each element:

<select id="ppState" name="ppState" class="state">

$('select.state').append(...

Answer 4

I hope this will help you to append

these code i used in spring boot MVC

JSON Data

[{"name":"Afghanistan","code":"af"},
{"name":"Albania","code":"al"},
{"name":"Algeria","code":"dz"}]

JQuery Code

var jsonData = '${restData}';
var obj = JSON.parse(jsonData);
for (i in obj) {
    $('#selectList').append(new Option(obj[i].name, obj[i].code));

}