[Solved] json object value to select dropdown update using jquery

by


Further @Rory McCrossan comment, A. You need tun each on the dropDownField.roles not on dropDownField. B. You can “collect” the html for each item in the array, then append it to the select. 

var roles = {
  "roles": [{
      "role_id": 2,
      "role_name": "admin"
    },
    {
      "role_id": 4,
      "role_name": "QA"
    },
    {
      "role_id": 3,
      "role_name": "TL"
    },
    {
      "role_id": 5,
      "role_name": "user"
    },
    {
      "role_id": 1,
      "role_name": "root"
    }
  ]
}

var dropDownField = roles;
var html="";
if (typeof(dropDownField) === "object" && Object.keys(dropDownField).length) {
  $.each(dropDownField.roles, function(key, data) {
    html += `<option value="${data.role_id}">${data.role_name}</option>`;
  });
}

$('select').html(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

1

solved json object value to select dropdown update using jquery