Wie man eine JSON -Antwort in JavaScript durchläuft

Dieses Tutorial zeigt, wie JSON -Daten, die von einem Remote -Server mit JavaScript empfangen werden, effizient analysiert werden. Wir werden den Vorgang in zwei Schritten abdecken: Decodieren der JSON -Zeichenfolge in eine verwendbare JavaScript -Struktur (Objekt oder Array) und dann durch diese Struktur durchzusetzen, um auf die Daten zuzugreifen. Wir werden praktische Beispiele mit sowohl XMLHttpRequest als auch mit der moderneren fetch api verwenden.

Schlüsselkonzepte:

1. JSON (JavaScript-Objektnotation): Ein leichtes, textbasiertes Datenabtauschformat, das in Webanwendungen weit verbreitet ist. JSON inspiriert von JavaScript -Objekt -Literal -Syntax und benötigt ausschließlich doppelte Zitate um Tasten.
2. JSON -Analyse: Der Prozess der Konvertierung einer JSON -String in ein JavaScript -Objekt oder -Array. Dies ist entscheidend, da der Server Daten als Zeichenfolge sendet, die analysiert werden müssen, bevor er verwendet werden kann.
3. Iteration: Nach der Parsen verwenden wir die integrierten Methoden von JavaScript wie for...in, Object.entries, Object.values oder Array-Methoden (forEach usw.), um auf einzelne Datenelemente zuzugreifen Innerhalb der analysierten Struktur.

JSON verstehen:

JSON -Daten können auf zwei Arten strukturiert werden:

• JSON -Objekt: Eine Sammlung von Namen/Wertpaaren (ähnlich wie ein JavaScript -Objekt).
• JSON -Array: Eine geordnete Liste von Werten (ähnlich wie bei einem JavaScript -Array).

JSON mit XMLHttpRequest:

abrufen

Verwenden wir die icanhazdadjoke API (eine einfache Witz -API) als Beispiel. Diese API gibt JSON -Daten zurück, wenn der Accept -Header auf application/json.

gesetzt ist

Erstens holen wir die Daten:

<code class="language-javascript">const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(typeof xhr.responseText); // Output: string
    console.log(xhr.responseText);       // Output: JSON string
  }
};
xhr.open('GET', 'https://icanhazdadjoke.com/', true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.send(null);</code>

Die Antwort ist eine Zeichenfolge. Wir analysieren es mit JSON.parse():

<code class="language-javascript">if (xhr.readyState === XMLHttpRequest.DONE) {
  const response = JSON.parse(xhr.responseText);
  console.log(response); // Output: Parsed JavaScript object
}</code>

Jetzt können wir die Eigenschaften des Objekts durchführen. Hier sind einige Möglichkeiten:

• for...in Schleife:

<code class="language-javascript">for (const key in response) {
  if (response.hasOwnProperty(key)) {
    console.log(`${key}: ${response[key]}`);
  }
}</code>

• Object.entries(): Ein moderner und prägnanter:

<code class="language-javascript">Object.entries(response).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});</code>

JSON mit der fetch api:

abrufen

Die fetch API bietet einen saubereren, versprochenen Ansatz:

<code class="language-javascript">(async () => {
  const response = await fetch('https://icanhazdadjoke.com/', {
    headers: { Accept: 'application/json' },
  });
  const jsonData = await response.json();
  Object.entries(jsonData).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
  });
})();</code>

response.json() analysiert die Antwortkörper als JSON und gibt ein Versprechen zurück, das mit den analysierten Daten auflöst.

Umgang mit JSON -Arrays:

Lassen Sie uns eine Liste von Repositorys aus der Github -API abrufen:

<code class="language-javascript">(async () => {
  const repos = await fetch('https://api.github.com/users/jameshibbard/repos').then(res => res.json());
  repos.forEach(repo => {
    console.log(`${repo.name} has ${repo.stargazers_count} stars`);
  });
})();</code>

Dieses Beispiel zeigt das Iterieren durch ein JSON -Array mit forEach. Sie können andere Array -Methoden wie map oder filter für komplexere Operationen verwenden.

Schlussfolgerung:

Dieses Tutorial umfasste die wesentlichen Schritte des Parsens und Iterierens von JSON -Antworten in JavaScript unter Verwendung sowohl XMLHttpRequest als auch der fetch -API. Denken Sie daran, potenzielle Fehler (z. B. Netzwerkprobleme, ungültige JSON) in einer Produktionsumgebung zu bewältigen. Die fetch -API mit ihrem vielversprechenden Ansatz wird im Allgemeinen für ihre sauberere Syntax und bessere Funktionen zur Fehlerbehandlung bevorzugt.

Das obige ist der detaillierte Inhalt vonWie man eine JSON -Antwort in JavaScript durchläuft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!