How to parse JSON data with jQuery / JavaScript?
JqueryAjaxJsonParsingJquery Problem Overview
I have a AJAX call that returns some JSON like this:
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'http://example/functions.php',
data: { get_param: 'value' },
success: function (data) {
var names = data
$('#cand').html(data);
}
});
});
Inside the #cand
div I'll get:
[ { "id" : "1", "name" : "test1" }, { "id" : "2", "name" : "test2" }, { "id" : "3", "name" : "test3" }, { "id" : "4", "name" : "test4" }, { "id" : "5", "name" : "test5" } ]
How can I loop through this data and place each name in a div?
Jquery Solutions
Solution 1 - Jquery
Assuming your server side script doesn't set the proper Content-Type: application/json
response header you will need to indicate to jQuery that this is JSON by using the dataType: 'json'
parameter.
Then you could use the $.each()
function to loop through the data:
$.ajax({
type: 'GET',
url: 'http://example/functions.php',
data: { get_param: 'value' },
dataType: 'json',
success: function (data) {
$.each(data, function(index, element) {
$('body').append($('<div>', {
text: element.name
}));
});
}
});
or use the $.getJSON
method:
$.getJSON('/functions.php', { get_param: 'value' }, function(data) {
$.each(data, function(index, element) {
$('body').append($('<div>', {
text: element.name
}));
});
});
Solution 2 - Jquery
Setting dataType:'json'
will parse JSON for you:
$.ajax({
type: 'GET',
url: 'http://example/functions.php',
data: {get_param: 'value'},
dataType: 'json',
success: function (data) {
var names = data
$('#cand').html(data);
}
});
Or else you can use parseJSON
:
var parsedJson = $.parseJSON(jsonToBeParsed);
Then you can iterate the following:
var j ='[{"id":"1","name":"test1"},{"id":"2","name":"test2"},{"id":"3","name":"test3"},{"id":"4","name":"test4"},{"id":"5","name":"test5"}]';
...by using $().each
:
var json = $.parseJSON(j);
$(json).each(function (i, val) {
$.each(val, function (k, v) {
console.log(k + " : " + v);
});
});
Solution 3 - Jquery
Try following code, it works in my project:
//start ajax request
$.ajax({
url: "data.json",
//force to handle it as text
dataType: "text",
success: function(data) {
//data downloaded so we call parseJSON function
//and pass downloaded data
var json = $.parseJSON(data);
//now json variable contains data in json format
//let's display a few items
for (var i=0;i<json.length;++i)
{
$('#results').append('<div class="name">'+json[i].name+'</>');
}
}
});
Solution 4 - Jquery
$(document).ready(function () {
$.ajax({
url: '/functions.php',
type: 'GET',
data: { get_param: 'value' },
success: function (data) {
for (var i=0;i<data.length;++i)
{
$('#cand').append('<div class="name">data[i].name</>');
}
}
});
});
Solution 5 - Jquery
Use that code.
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Your URL",
data: "{}",
dataType: "json",
success: function (data) {
alert(data);
},
error: function (result) {
alert("Error");
}
});
Solution 6 - Jquery
ok i had the same problem and i fix it like this by removing []
from [{"key":"value"}]
:
> 1. in your php file make shure that you print like this
echo json_encode(array_shift($your_variable));
> 2. in your success function do this
success: function (data) {
var result = $.parseJSON(data);
('.yourclass').append(result['your_key1']);
('.yourclass').append(result['your_key2']);
..
}
and also you can loop it if you want
Solution 7 - Jquery
I agree with all the above solutions, but to point out whats the root cause of this issue is, that major role player in all above code is this line of code:
dataType:'json'
when you miss this line (which is optional), the data returned from server is treated as full length string (which is default return type). Adding this line of code informs jQuery to convert the possible json string into json object.
Any jQuery ajax calls should specify this line, if expecting json data object.
Solution 8 - Jquery
var jsonP = "person" : [ { "id" : "1", "name" : "test1" },
{ "id" : "2", "name" : "test2" },
{ "id" : "3", "name" : "test3" },
{ "id" : "4", "name" : "test4" },
{ "id" : "5", "name" : "test5" } ];
var cand = document.getElementById("cand");
var json_arr = [];
$.each(jsonP.person,function(key,value){
json_arr.push(key+' . '+value.name + '<br>');
cand.innerHTML = json_arr;
});
<div id="cand">
</div>
Solution 9 - Jquery
Json data
data = {"clo":[{"fin":"auto"},{"fin":"robot"},{"fin":"fail"}]}
When retrieve
$.ajax({
//type
//url
//data
dataType:'json'
}).done(function( data ) {
var i = data.clo.length; while(i--){
$('#el').append('<p>'+data.clo[i].fin+'</>');
}
});
Solution 10 - Jquery
Here's how you would do this in JavaScript, this is a really efficient way to do it!
let data = "{ "name": "mark"}"
let object = JSON.parse(data);
console.log(object.name);
this would print mark
Solution 11 - Jquery
$.ajax({
url: '//.xml',
dataType: 'xml',
success: onTrue,
error: function (err) {
console.error('Error: ', err);
}
});
$('a').each(function () {
$(this).click(function (e) {
var l = e.target.text;
//array.sort(sorteerOp(l));
//functionToAdaptHtml();
});
});