Cómo analizar datos JSON con jQuery/JavaScript?

Question

tengo una llamada AJAX que devuelve algunos JSON como esto:

$(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 de la #cand div voy a conseguir:

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

Cómo puedo bucle a través de estos datos y colocar cada nombre en una div?

Answer 1

Asumiendo que su script del lado del servidor no establecer la cabecera Content-Type: application/json respuesta adecuada tendrá que indicar a jQuery que este es JSON mediante el parámetro dataType: 'json'.

Posteriormente, se podría utilizar la función $.each() colocar a través de 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 método $.getJSON:

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

Answer 2

establecer 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 de lo contrario puede utilizar parseJSON

var parsedJson = $.parseJSON(jsonToBeParsed); 

aquí es cómo se puede iterar

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

iterate 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/

Answer 3

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

Answer 4

$(document).ready(function() { 
    $.ajax({ 
     type: 'GET', 
     url: '/functions.php', 
     data: { get_param: 'value' }, 
     success: function (data) { 
     for (var i=0;i<data.length;++i) 
     { 
     $('#cand').append('<div class="name">data[i].name</>'); 
     } 
     } 
    }); 
}); 

Answer 5

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> 

Answer 6

Trate siguiente código, que 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.length;++i) 
     { 
      $('#results').append('<div class="name">'+json[i].name+'</>'); 
     } 
    } 
}); 

Answer 7

bien que tenía el mismo problema y puedo solucionarlo como esto mediante la eliminación de [] de [{"key":"value"}]:

1. en su archivo PHP Debe garantizarse que también se imprime como esto

echo json_encode(array_shift($your_variable)); 

2. en su función de éxito hacer esto

success: function (data) { 
    var result = $.parseJSON(data); 
     ('.yourclass').append(result['your_key1']); 
     ('.yourclass').append(result['your_key2']); 
     .. 
    } 

y también puede recorrerlo si lo desea

Answer 8

datos JSON

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

Cuando retrieve

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