jquery - ejemplos - leer json externo con javascript

Cómo analizar datos JSON con jQuery/JavaScript?

Question

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?

Answer 1

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(''<p>''+data.clo[i].fin+''</>'');
}
});

Answer 2

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

Answer 3

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($(''<div>'', {
                text: element.name
            }));
        });
    }
});

o use el método $.getJSON :

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

Answer 4

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

Answer 5

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

2. 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

Answer 6

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/

Answer 7

 $(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 8

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>