jQuery-Schleife über JSON-Ergebnis aus AJAX-Erfolg?


152

Beim jQuery AJAX-Erfolgsrückruf möchte ich die Ergebnisse des Objekts durchlaufen. Dies ist ein Beispiel dafür, wie die Antwort in Firebug aussieht.

[
 {"TEST1":45,"TEST2":23,"TEST3":"DATA1"},
 {"TEST1":46,"TEST2":24,"TEST3":"DATA2"},
 {"TEST1":47,"TEST2":25,"TEST3":"DATA3"}
]

Wie kann ich die Ergebnisse durchlaufen, um Zugriff auf jedes der Elemente zu erhalten? Ich habe so etwas wie unten versucht, aber das scheint nicht zu funktionieren.

jQuery.each(data, function(index, itemData) {
  // itemData.TEST1
  // itemData.TEST2
  // itemData.TEST3
});

1
Das sollte funktionieren. Sind Sie sicher, dass dies genau der gleiche Code und die gleichen Daten sind?
Tamas Czinege

Antworten:


255

Sie können die äußere Schlaufe entfernen und ersetzen thisdurch data.data:

$.each(data.data, function(k, v) {
    /// do stuff
});

Du warst nah:

$.each(data, function() {
  $.each(this, function(k, v) {
    /// do stuff
  });
});

Sie haben ein Array von Objekten / Karten, sodass die äußere Schleife über diese iteriert. Die innere Schleife durchläuft die Eigenschaften jedes Objektelements.


Die erste Schleife ist für eine "Kategorie", während eine Schleife innerhalb dieser für ein "Attribut" ist. Wie geht das sonst noch?
dcolumbus

Was ist, wenn Sie mit dem Objektelement und nicht mit seinen Eigenschaften arbeiten möchten? Warum funktioniert die Schleife von @ aherrick in der Frage nicht?
StuperUser

1
Wenn diese Schleife in einer separaten Funktion verwendet $(data)wird data, verwenden Sie statt . Andernfalls gibt die Variable kimmer 0 zurück.
user1226868

2
Könnte jemand die Variablen k & v erklären, die an die zweite Funktion übergeben werden?
Brent Connor

@BrentConnor In diesem Fall stehen k & v für den Schlüssel und den Wert des Arrays, das durchlaufen wird. Lesen Sie mehr über die Funktion jquery .each ()
Ghost Echo

80

Sie können auch die Funktion getJSON verwenden:

    $.getJSON('/your/script.php', function(data) {
        $.each(data, function(index) {
            alert(data[index].TEST1);
            alert(data[index].TEST2);
        });
    });

Dies ist wirklich nur eine Umformulierung der Antwort von ifesdjeen, aber ich dachte, es könnte für die Menschen hilfreich sein.


Das hat geholfen. Aus irgendeinem Grund konnte ich die Antwort von @cletus nicht zum Laufen bringen, aber das tat es. Ich bin mir nicht sicher, was das große Geheimnis von jQuery ist, aber einfacher Code funktioniert nicht immer so, wie Sie es erwarten.
AturSams

38

Wenn Sie Fire Fox verwenden, öffnen Sie einfach eine Konsole (verwenden Sie die Taste F12) und probieren Sie Folgendes aus:

var a = [
 {"TEST1":45,"TEST2":23,"TEST3":"DATA1"},
 {"TEST1":46,"TEST2":24,"TEST3":"DATA2"},
 {"TEST1":47,"TEST2":25,"TEST3":"DATA3"}
];

$.each (a, function (bb) {
    console.log (bb);
    console.log (a[bb]);
    console.log (a[bb].TEST1);
});

ich hoffe es hilft


17

Für alle anderen, die daran festhalten, funktioniert es wahrscheinlich nicht, weil der Ajax-Aufruf Ihre zurückgegebenen Daten als Text interpretiert - dh es ist noch kein JSON-Objekt.

Sie können es in ein JSON-Objekt konvertieren, indem Sie den Befehl parseJSON manuell verwenden oder einfach die Eigenschaft dataType: 'json' zu Ihrem Ajax-Aufruf hinzufügen. z.B

jQuery.ajax({
    type: 'POST',
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    data: data, 
    dataType: 'json', // ** ensure you add this line **
    success: function(data) {
        jQuery.each(data, function(index, item) {
            //now you can access properties using dot notation
        });
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("some error");
    }
});

Dies gibt mir "Daten sind undefiniert".
Hugh Seagraves

Sie sollten Ihre eigene Variable verwenden, in der die Daten gespeichert sind, die Sie an die URL übergeben. Wenn Ihre Datenvariable mydata heißt, verwenden Sie folgende Daten: mydata
Dave Hilditch

Ah. Hab es jetzt verstanden. Vielen Dank.
Hugh Seagraves

Uncaught TypeError: Cannot use 'in' operator to search for '188' indiesen Fehler bekommen.
Si8

15

Greifen Sie wie bei jedem anderen Array auf das JSON-Array zu.

for(var i =0;i < itemData.length-1;i++)
{
  var item = itemData[i];
  alert(item.Test1 + item.Test2 + item.Test3);
}

1
alte Frage, aber wie könnte man json-Schlüssel durchlaufen, ohne die Namen zu kennen ... wie Test1, Test2, ext ...
BarclayVision

@BarclayVision Sie verwenden nur den Schlüssel als Nummer. Der erste Schlüssel ist [0]der nächste [1]und so weiter.
Copilot0910

Können wir einen anderen Ajax-Aufruf in dieser for-Schleife verwenden? Wenn ja, dann sag mir bitte wie?
Jyoti Jadhav

5

Folgendes habe ich mir ausgedacht, um alle Datenwerte einfach anzuzeigen:

var dataItems = "";
$.each(data, function (index, itemData) {
    dataItems += index + ": " + itemData + "\n";
});
console.log(dataItems);


4

Probieren Sie die Funktion jQuery.map aus, die ziemlich gut mit Karten funktioniert.

var mapArray = {
  "lastName": "Last Name cannot be null!",
  "email": "Email cannot be null!",
  "firstName": "First Name cannot be null!"
};

$.map(mapArray, function(val, key) {
  alert("Value is :" + val);
  alert("key is :" + key);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


2

Wenn Sie keine Warnung wünschen, das heißt, Sie möchten HTML, dann tun Sie dies

...
    $.each(data, function(index) {
        $("#pr_result").append(data[index].dbcolumn);
    });
...

HINWEIS: Verwenden Sie "Anhängen" und nicht "HTML". Andernfalls wird das letzte Ergebnis in Ihrer HTML-Ansicht angezeigt

dann sollte Ihr HTML-Code so aussehen

...
<div id="pr_result"></div>
...

Sie können das div auch in der jquery formatieren (Klasse hinzufügen), bevor es als HTML gerendert wird


0

Wenn Sie die unten gezeigte kurze Methode der JQuery-Ajax-Aufruffunktion verwenden, müssen die zurückgegebenen Daten als JSON-Objekt interpretiert werden, damit Sie eine Schleife durchführen können.

$.get('url', function(data, statusText, xheader){
 // your code within the success callback
  var data = $.parseJSON(data);
  $.each(data, function(i){
         console.log(data[i]);
      })
})

0

Ich bin Teil der ES2015-Pfeilfunktion zum Finden von Werten in einem Array

const result = data.find(x=> x.TEST1 === '46');

Kasse Array.prototype.find () HIER


0

$eachwird funktionieren .. Eine andere Option ist jQuery Ajax Callback für das Array-Ergebnis

function displayResultForLog(result) {
  if (result.hasOwnProperty("d")) {
    result = result.d
  }

  if (result !== undefined && result != null) {
    if (result.hasOwnProperty('length')) {
      if (result.length >= 1) {
        for (i = 0; i < result.length; i++) {
          var sentDate = result[i];
        }
      } else {
        $(requiredTable).append('Length is 0');
      }
    } else {
      $(requiredTable).append('Length is not available.');
    }

  } else {
    $(requiredTable).append('Result is null.');
  }
}

0

Ich benutze .map für foreach. Beispielsweise

success: function(data) {
  let dataItems = JSON.parse(data)
  dataItems = dataItems.map((item) => {
    return $(`<article>
                <h2>${item.post_title}</h2>
                <p>${item.post_excerpt}</p>
              </article>`)
  })
},
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.