Question

I am creating an user registration form using jsp,in which there is an option to select State from a combo box.I am using a simple html combo box but i am receiving State as a json object from web service.So how to populate the combo box with json object.

State Json is as follows,

{"States":[{"id":"1","stateName":"Alabama","code":"AL"},
{"id":"4","stateName":"Arkansas","code":"AR"},
{"id":"8","stateName":"Delaware","code":"DE"}]}

My Javascript function is,

function getStates(){    
url = WSPath;
response=initiateRequest(url);}

My HTML combo box is <select name="State">

I need to populate the combo-box with the above json object.

Answer 1

Pure js:

var select = document.createElement("select");
var obj = JSON.parse(response);

for (var i=0; i < obj.States.length; i++)
{
  var option = document.createElement("option");
  option.id = obj.States[i].id;
  option.value = obj.States[i].code;
  option.innerHTML = obj.States[i].stateName;
  select.appendChild(option);
}

Tweak the id, value and innerHTML to your needs.