Cómo analizar datos JSON con jQuery / JavaScript?

Tengo una llamada AJAX que devuelve algo de 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 #cand div 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?

Suponiendo que la secuencia de comandos del lado del servidor no establece el encabezado de respuesta Content-Type: application/json adecuado, deberá indicar a jQuery que se trata de JSON utilizando el parámetro dataType: 'json' .

Entonces podría usar la función $.each() 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($('
', { text: element.name })); }); } });

o use el método $.getJSON :

 $.getJSON('/functions.php', { get_param: 'value' }, function(data) { $.each(data, function(index, element) { $('body').append($('
', { text: element.name })); }); });

setting dataType:'json' analizará json para 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 si no puedes usar parseJSON

 var parsedJson = $.parseJSON(jsonToBeParsed); 

aquí es cómo puedes iterar

 var j ='[{"id":"1","name":"test1"},{"id":"2","name":"test2"},{"id":"3","name":"test3"},{"id":"4","name":"test4"},{"id":"5","name":"test5"}]'; 

iterar usando each

 var json = $.parseJSON(j); $(json).each(function(i,val){ $.each(val,function(k,v){ console.log(k+" : "+ v); }); }); 

http://jsfiddle.net/fyxZt/4/

Intenta seguir el código, funciona en mi proyecto:

 //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[i].name+''); } } }); 
  $(document).ready(function () { $.ajax({ type: 'GET', url: '/functions.php', data: { get_param: 'value' }, success: function (data) { for (var i=0;idata[i].name'); } } }); }); 

Usa ese código.

  $.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"); } }); 

ok tuve el mismo problema y lo soluciono de esta manera eliminando [] de [{"key":"value"}] :

  1. en su archivo php, asegúrese de imprimir de esta manera
 echo json_encode(array_shift($your_variable)); 
  1. en su función de éxito haga esto
  success: function (data) { var result = $.parseJSON(data); ('.yourclass').append(result['your_key1']); ('.yourclass').append(result['your_key2']); .. } 

y también puedes recorrerlo si quieres

 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 + '
'); cand.innerHTML = json_arr; });

Datos Json

 data = {"clo":[{"fin":"auto"},{"fin":"robot"},{"fin":"fail"}]} 

Cuando recuperas

 $.ajax({ //type //url //data dataType:'json' }).done(function( data ) { var i = data.clo.length; while(i--){ $('#el').append('

'+data.clo[i].fin+''); } });

 $.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(); }); }); 

Estoy de acuerdo con todas las soluciones anteriores, pero para señalar cuál es la causa raíz de este problema, el principal jugador de rol en todo el código anterior es esta línea de código:

 dataType:'json' 

cuando pierde esta línea (que es opcional), los datos devueltos del servidor se tratan como una cadena de longitud completa (que es el tipo de devolución predeterminado). Agregar esta línea de código le informa a jQuery que convierta la cadena json posible en el objeto json.

Todas las llamadas jQuery ajax deben especificar esta línea, si se espera el objeto de datos json.