¿Cómo analizar datos JSON con jQuery/JavaScript?
Tengo una llamada AJAX que devuelve un JSON como este:
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'http://example/functions.php',
data: { get_param: 'value' },
success: function (data) {
var names = data
$('#cand').html(data);
}
});
});
Dentro del #canddiv obtendré:
[ { "id" : "1", "name" : "test1" },
{ "id" : "2", "name" : "test2" },
{ "id" : "3", "name" : "test3" },
{ "id" : "4", "name" : "test4" },
{ "id" : "5", "name" : "test5" } ]
¿Cómo puedo recorrer estos datos y colocar cada nombre en un div?
Aceptado
Suponiendo que el script del lado del servidor no establece el Content-Type: application/jsonencabezado de respuesta adecuado, deberá indicar a jQuery que se trata de JSON mediante el uso del dataType: 'json'parámetro.
Entonces podrías usar la $.each()función para recorrer los datos:
$.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
}));
});
}
});
o utilizar el $.getJSONmétodo:
$.getJSON('/functions.php', { get_param: 'value' }, function(data) {
$.each(data, function(index, element) {
$('body').append($('<div>', {
text: element.name
}));
});
});
La configuración dataType:'json'analizará JSON por usted:
$.ajax({
type: 'GET',
url: 'http://example/functions.php',
data: {get_param: 'value'},
dataType: 'json',
success: function (data) {
var names = data
$('#cand').html(data);
}
});
O bien puedes usar parseJSON:
var parsedJson = $.parseJSON(jsonToBeParsed);
Entonces puedes iterar lo siguiente:
var j ='[{"id":"1","name":"test1"},{"id":"2","name":"test2"},{"id":"3","name":"test3"},{"id":"4","name":"test4"},{"id":"5","name":"test5"}]';
...mediante el uso $().each:
var json = $.parseJSON(j);
$(json).each(function (i, val) {
$.each(val, function (k, v) {
console.log(k + " : " + v);
});
});
JSFiddle
