Wie analysiere ich JSON-Daten mit jQuery / JavaScript?

Ich habe einen AJAX-Aufruf, der JSON wie folgt zurückgibt:

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

In der #candDiv bekomme ich:

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

Wie kann ich diese Daten durchlaufen und jeden Namen in ein div einfügen?

Angenommen, Ihr serverseitiges Skript legt nicht den richtigen Content-Type: application/jsonAntwortheader fest, müssen Sie jQuery mithilfe des dataType: 'json'Parameters mitteilen, dass dies JSON ist.

Dann könnten Sie die verwenden $.each() Funktion verwenden, um die Daten zu durchlaufen:

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

oder verwenden Sie die $.getJSONMethode:

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

Durch die Einstellung dataType:'json'wird JSON für Sie analysiert:

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

Oder Sie können verwenden parseJSON:

var parsedJson = $.parseJSON(jsonToBeParsed);

Dann können Sie Folgendes wiederholen:

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

... mit $().each:

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

JSFiddle

Versuchen Sie folgenden Code, es funktioniert in meinem Projekt:

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

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

Verwenden Sie diesen Code.

     $.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 ich hatte das gleiche problem und ich behebe es so indem ich es entferne []von [{"key":"value"}]:

1. Stellen Sie in Ihrer PHP-Datei sicher, dass Sie so drucken

echo json_encode(array_shift($your_variable));

2. Tun Sie dies in Ihrer Erfolgsfunktion

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

und Sie können es auch schleifen, wenn Sie möchten

Ich stimme allen oben genannten Lösungen zu, aber um darauf hinzuweisen, was die Hauptursache für dieses Problem ist, ist diese Codezeile der Hauptakteur in allen oben genannten Codes:

dataType:'json'

Wenn Sie diese Zeile verpassen (optional), werden die vom Server zurückgegebenen Daten als Zeichenfolge in voller Länge behandelt (dies ist der Standardrückgabetyp). Durch Hinzufügen dieser Codezeile wird jQuery angewiesen, die mögliche JSON-Zeichenfolge in ein JSON-Objekt zu konvertieren.

Alle jQuery-Ajax-Aufrufe sollten diese Zeile angeben, wenn ein json-Datenobjekt erwartet wird.

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>

Json-Daten

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

Beim Abrufen

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