Comment analyser et afficher du XML avec JavaScript

Aujourd'hui, nous allons comprendre comment travailler avec XML en JavaScript. Si XML vous semble quelque chose d'incompréhensible, ne vous inquiétez pas ! Nous allons tout analyser en détail et ajouter plus d'exemples pour que tout soit aussi clair que possible.

XML (avec HTML) est l'un des formats de stockage de données, ils ressemblent à HTML. Voyons comment les analyser et les afficher avec JavaScript.

Qu'est-ce que XML ?

XML (eXtensible Markup Language) est un format texte pour le stockage et la transmission de données. Il ressemble à ceci :

<люди>
  <человек>
    <имя>Иван</имя>
    <возраст>25</возраст>
  </человек>
  <человек>
    <имя>Мария</имя>
    <возраст>30</возраст>
  </человек>
</люди>

Ici, nous avons des « gens » qui contiennent plusieurs « personnes » avec leur « nom » et leur « âge ». C'est comme une telle table sous forme de texte.

Maintenant, apprenons à analyser un tel XML avec JavaScript.

Comment analyser XML avec JavaScript ?

Il y a plusieurs étapes qui vous aideront à travailler avec XML :

1. Obtenir des données XML: les données peuvent être récupérées à partir du serveur ou simplement stockées en tant que chaîne dans JavaScript.

2. Les convertir en objet: pour travailler avec XML, nous devons le convertir en un objet avec lequel JavaScript peut travailler.

3. Extraire les données: après cela, vous pouvez extraire des valeurs spécifiques.

Commençons par l'exemple le plus simple.

Exemple 1 : Analyse d'une chaîne XML simple

Supposons que nous avons une ligne avec XML :

const xmlString = `
  <person>
    <person>
      <name>Ivan</name>
      <age>25</age>
    </person>
    <person>
      <name>Maria</name>
      <age>30</age>
    </person>
  </people>`;

Maintenant, nous devons la transformer en objet. JavaScript a un objet intégré pour cela DOMParser.

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");

Maintenant xmlDoc - est un objet avec lequel vous pouvez travailler.

Extraction de données à partir de XML

Pour extraire les données, nous devons traiter les nœuds XML comme des éléments HTML. Nous utilisons la méthode getElementsByTagName():

const people = xmlDoc.getElementsByTagName("people");

for (let i = 0; i < people.length; i++) {
  const name = people[i].getElementsByTagName("name")[0].textContent;
  const age = people[i].getElementsByTagName("age")[0].textContent;
  console.log(`Name: ${name}, Age: ${age}`);
}

Ici, nous passons par chaque « personne » et obtenons son « nom » et son « âge ». En conséquence, la console affichera :

Имя: Иван, Возраст: 25
Имя: Мария, Возраст: 30

Exemple 2 : Analyse XML à partir d'un document HTML

Parfois, le XML peut faire partie d'une page Web et nous devons l'analyser directement à partir de là. Imaginons que notre code HTML contienne un tel élément :

<div id="xml">
  <люди>
    <человек>
      <имя>Сергей</имя>
      <возраст>28</возраст>
    </человек>
    <человек>
      <имя>Ольга</имя>
      <возраст>34</возраст>
    </человек>
  </люди>
</div>

Pour obtenir ce XML et l'analyser, nous pouvons faire ceci :

const xmlStringFromHtml = document.getElementById("xml").innerHTML;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStringFromHtml, "text/xml");

const люди = xmlDoc.getElementsByTagName("people");

for (let i = 0; i < people.length; i++) {
  const name = people[i].getElementsByTagName("name")[0].textContent;
  const age = people[i].getElementsByTagName("age")[0].textContent;
  console.log(`Name: ${name}, Age: ${age}`);
}

Ici, nous prenons d'abord le contenu HTML, puis nous l'utilisons comme XML.

Exemple 3 : Traitement des erreurs

Parfois, le XML peut être incorrect et nous devons être en mesure de le gérer. Par exemple, si la balise n'est pas fermée, cela peut provoquer une erreur. Pour le traiter, vous pouvez ajouter une vérification :

const invalidXmlString = `<person> <name>Ivan</name> <age>25</age></person>`; // Erreur : <personnes> non fermé

try {
  const xmlDoc = parser.parseFromString(invalidXmlString, "text/xml");
  const ошибка = xmlDoc.getElementsByTagName("parsererror");
  if (ошибка.length > 0) {
    console.error("XML error:", ошибка[0].textContent);
  } else {
    console.log("XML is correct");
  }
} catch (e) {
  console.error("Error parsing XML:", e);
}

Résultats

C'est tout ! Nous avons appris :

1. Démontage des lignes XML en JavaScript.

2. Extraire des données XML en utilisant des méthodes similaires à celles utilisées pour le HTML.

3. Traiter les erreurs dans XML.

XML est un format assez ancien, mais toujours utile pour l'échange de données. Maintenant, tu sais comment travailler avec lui en utilisant JavaScript ! 🎉

Si vous avez des questions ou si vous voulez plus d'exemples, écrivez-moi, je serai heureux de vous aider ! 😊