Populate dropdown from json response

Question

I want to populate my dropdown with json data.

<select id="selectSkill"><option>Choose a skill</option></select>

I have json in following format:

[
  {
    "SkillID": "100",
    "SkillName": "301 - COMCAST"
  },
  {
    "SkillID": "36",
    "SkillName": "303 - COX"
  },
]

In case of normal arrays, I would do it like this:

var array= ["1", "2", "3", "4", "5"];
$.each(array, function (i, p) {
$('#selectSkill').append($('<option></option>').val(p).html(p));

How would I populate my dropdown as to set SkillID as value and SkillName as text of my dropdown?

Possible duplicate of [How can I use JSON data to populate the options of a select box?](https://stackoverflow.com/questions/5918144/how-can-i-use-json-data-to-populate-the-options-of-a-select-box) — Derek Hopper, Dec 28 '17 at 19:21

score 7 · Accepted Answer · answered Dec 28 '17 at 19:19

You can do:-

$.each(array, function (i, p) {
  $('#selectSkill').append($('<option></option>').val(p.SkillID).html(p.SkillName));
});

Working example:-

array =[
  {
    "SkillID": "100",
    "SkillName": "301 - COMCAST"
  },
  {
    "SkillID": "36",
    "SkillName": "303 - COX"
  },
];

$.each(array, function (i, p) {
  $('#selectSkill').append($('<option></option>').val(p.SkillID).html(p.SkillName));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectSkill"></select>

Populate dropdown from json response

1 Answers1