How to use json data in html using jquery

Question

This is json data is comming from php

[{"employee_id":"1","first_name":"Ganesh","last_name":"Mulay"},
 {"employee_id":"2","first_name":"khalid","last_name":"shaikh"},
 {"employee_id":"3","first_name":"Navnath","last_name":"Bangar"}
]

And i want output like this

<option value="1"> Ganesh Mulay </option>
<option value="2"> khalid shaikh </option>
<option value="3"> Navnath Bangar</option>

http://stackoverflow.com/questions/6601952/programmatically-create-select-list — Priyesh Kumar, Aug 25 '16 at 12:31

score 0 · Answer 1 · answered Aug 25 '16 at 12:30

0

It is as same as using javascript

for (var i = 0; i < arr.length; i++) // Do something like arr[i].employee_id;

Kindly check this example: https://jsfiddle.net/14ra68hs/

answered Aug 25 '16 at 12:30

Zay Lau

1,856
1
10
17

I believe you may measured the length of JSON string – Zay Lau Aug 25 '16 at 13:09
@GaneshMulay You are welcome :) Would you mind to accept mine as your answer if it solved your problem – Zay Lau Aug 25 '16 at 13:27

score 0 · Answer 2 · answered Aug 25 '16 at 12:32

var jData = [{
  "employee_id": "1",
  "first_name": "Ganesh",
  "last_name": "Mulay"
}, {
  "employee_id": "2",
  "first_name": "Rahul",
  "last_name": "kumar"
}, {
  "employee_id": "3",
  "first_name": "Kiran",
  "last_name": "Raj"
}];

$('<select id="test">').appendTo('body');
$.each(jData, function(index, value) {
  $('<option>').val(value.employee_id).text(value.first_name + ' ' + value.last_name).appendTo('select#test');
});

var jData = [{
  "employee_id": "1",
  "first_name": "Ganesh",
  "last_name": "Mulay"
}, {
  "employee_id": "2",
  "first_name": "Rahul",
  "last_name": "kumar"
}, {
  "employee_id": "3",
  "first_name": "Kiran",
  "last_name": "Raj"
}];

$('<select id="test">').appendTo('body');
$.each(jData, function(index, value) {
  $('<option>').val(value.employee_id).text(value.first_name + ' ' + value.last_name).appendTo('select#test');
});

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

JS Fiddle

score 0 · Answer 3 · answered Aug 25 '16 at 12:38

You can do something like this

$(document).ready(function(){

var json =[{"employee_id":"1","first_name":"Ganesh","last_name":"Mulay"},{"employee_id":"2","first_name":"Rahul","last_name":"kumar"},{"employee_id":"3","first_name":"Kiran","last_name":"Raj"}
];


//convert json to object


var html = "";

for(var key in json)
{
  
  html += '<option value="'+json[key].employee_id+'">'+
json[key].first_name+ ' '+json[key].last_name+'</option>';

}
  
 $("select").html(html)

})

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

<select>

</select>

How to use json data in html using jquery

3 Answers3