Comment parcourir une réponse JSON dans JavaScript

Ce didacticiel montre comment analyser efficacement les données JSON reçues d'un serveur distant à l'aide de JavaScript. Nous couvrirons le processus en deux étapes: décoder la chaîne JSON dans une structure JavaScript utilisable (objet ou tableau), puis itérant à travers cette structure pour accéder aux données. Nous utiliserons des exemples pratiques avec les deux XMLHttpRequest et l'api plus moderne fetch

Concepts clés:

1. JSON (notation d'objet JavaScript): un format léger et basé sur des données d'interchange de données largement utilisé dans les applications Web. Bien que inspiré par la syntaxe littérale de l'objet JavaScript, JSON nécessite strictement des citations doubles autour des clés.
2. Analyse JSON: Le processus de conversion d'une chaîne JSON en objet ou tableau JavaScript. Ceci est crucial car le serveur envoie des données sous forme de chaîne, qui doit être analysée avant de pouvoir être utilisée.
3. itération: Après l'analyse, nous utilisons des méthodes intégrées de JavaScript comme for...in, Object.entries, Object.values ou des méthodes de tableau (forEach, etc.) pour accéder aux éléments de données individuels Dans la structure analysée.

Comprendre JSON:

Les données JSON peuvent être structurées de deux manières:

• Objet JSON: Une collection de paires de nom / valeur (similaire à un objet JavaScript).
• Array JSON: Une liste ordonnée de valeurs (similaire à un tableau JavaScript).

Récupérer JSON avec XMLHttpRequest:

utilisons l'API icanhazdadjoke (une API de blague simple) comme exemple. Cette API renvoie les données JSON lorsque l'en-tête Accept est défini sur application/json.

Tout d'abord, nous récupérons les données:

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

La réponse est une chaîne. Nous l'analysons en utilisant 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>

Maintenant, nous pouvons parcourir les propriétés de l'objet. Voici quelques façons:

• for...in boucle:

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

• Object.entries(): Une approche plus moderne et concise:

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

Fonder JSON avec l'API fetch:

L'API fetch offre une approche basée sur les promesses et plus propre:

<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() analyse le corps de réponse comme JSON et renvoie une promesse qui se résout avec les données analysées.

Gestion des tableaux JSON:

Reprenons une liste de référentiels de l'API GitHub:

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

Cet exemple démontre itération via un tableau JSON en utilisant forEach. Vous pouvez utiliser d'autres méthodes de tableau comme map ou filter pour des opérations plus complexes.

Conclusion:

Ce tutoriel a couvert les étapes essentielles de l'analyse et de l'itération des réponses JSON en JavaScript, en utilisant à la fois XMLHttpRequest et l'API fetch. N'oubliez pas de gérer les erreurs potentielles (par exemple, les problèmes de réseau, JSON non valide) dans un environnement de production. L'API fetch, avec son approche basée sur les promesses, est généralement préférée pour sa syntaxe plus propre et de meilleures capacités de gestion des erreurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!