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?
ok i had the same problem and i fix it like this by removing []
from [{"key":"value"}]
:
- in your php file make shure that you print like this
echo json_encode(array_shift($your_variable));
- 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
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.
$(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</>');
}
}
});
});
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
$.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();
});
});
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);
});
});
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>
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");
}
});
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+'</>');
}
}
});
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+'</>');
}
});
Source: Stackoverflow.com