it-swarm.com.de

Wie analysiert man 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);
        }
    });
});

Im #cand div 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 einem div platzieren?

167
Patrioticcow

Wenn Sie davon ausgehen, dass Ihr serverseitiges Skript nicht den richtigen Content-Type: application/json-Antwortheader setzt, müssen Sie jQuery angeben, dass dies JSON ist, indem Sie den Parameter dataType: 'json' verwenden.

Dann können Sie die Funktion $.each() 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 benutze die $.getJSON Methode:

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

wenn Sie dataType:'json' einstellen, 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);
                }
            });

ansonsten können Sie parseJSON verwenden

var parsedJson = $.parseJSON(jsonToBeParsed);

so können Sie iterieren

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

iteriere mit each

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

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

67
Rafay

Versuchen Sie folgenden Code, der in meinem Projekt funktioniert:

//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+'</>');
        }
    }
});
19
 $(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");
            }
        });
4

oK, ich hatte das gleiche Problem und behebe es so, indem ich [] von [{"key":"value"}] entferne

  1. stellen Sie sicher, dass Sie in Ihrer PHP-Datei so drucken
echo json_encode(array_shift($your_variable));
  1. 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 

3
elaz

Ich stimme allen oben genannten Lösungen zu, um jedoch darauf hinzuweisen, dass die Hauptursache dieses Problems darin besteht, dass die wichtigste Rolle in allen obigen Codes die folgende Codezeile ist:

dataType:'json'

wenn Sie diese Zeile nicht finden (die optional ist), werden die vom Server zurückgegebenen Daten als Zeichenfolge voller Länge behandelt (dies ist der Standardrückgabetyp). Durch das Hinzufügen dieser Codezeile wird jQuery aufgefordert, den möglichen json-String in ein json-Objekt zu konvertieren.

Alle jQuery-Ajax-Aufrufe sollten diese Zeile angeben, wenn Sie ein Json-Datenobjekt erwarten.

2
justnajm
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>
2
Servesh Mishra

Json-Daten

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

Wenn abrufen 

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