Como analisar dados JSON com jQuery / JavaScript?

Eu tenho uma chamada AJAX que retorna algum JSON assim:

$(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 do #cand div eu vou pegar:

 [ { "id" : "1", "name" : "test1" }, { "id" : "2", "name" : "test2" }, { "id" : "3", "name" : "test3" }, { "id" : "4", "name" : "test4" }, { "id" : "5", "name" : "test5" } ] 

Como posso percorrer esses dados e colocar cada nome em uma div?

Supondo que o seu script do lado do servidor não defina o header apropriado de Content-Type: application/json você precisará indicar ao jQuery que este é JSON usando o parâmetro dataType: 'json' .

Então você poderia usar a function $.each() para percorrer os dados:

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

ou use o método $.getJSON :

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

definindo dataType:'json' irá analisar json para você

 $.ajax({ type: 'GET', url: 'http://example/functions.php', data: { get_param: 'value' }, dataType:'json', success: function (data) { var names = data $('#cand').html(data); } }); 

ou então você pode usar parseJSON

 var parsedJson = $.parseJSON(jsonToBeParsed); 

aqui está como você pode 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/

Tente seguir o código, ele funciona no meu projeto:

 //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'); } } }); });

Use esse 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 eu tive o mesmo problema e corrijo assim removendo [] de [{"key":"value"}] :

  1. no seu arquivo php fazer shure que você imprime como este
 echo json_encode(array_shift($your_variable)); 
  1. na sua function de sucesso, faça isso
  success: function (data) { var result = $.parseJSON(data); ('.yourclass').append(result['your_key1']); ('.yourclass').append(result['your_key2']); .. } 

e também você pode dar um loop se quiser

 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; });

Dados Json

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

Quando recuperar

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

Eu concordo com todas as soluções acima, mas para apontar qual é a causa deste problema, o principal participante em todos os códigos acima é esta linha de código:

 dataType:'json' 

quando você erra essa linha (que é opcional), os dados retornados do servidor são tratados como uma cadeia de comprimento total (que é o tipo de retorno padrão). Adicionar esta linha de código informa o jQuery para converter a possível cadeia json em object json.

Qualquer chamada ajax do jQuery deve especificar essa linha, se estiver esperando o object de dados do json.