Wie man XML mit JavaScript analysiert und anzeigt

Heute werden wir herausfinden, wie man mit XML in JavaScript arbeitet. Wenn XML wie etwas Unverständliches klingt, mach dir keine Sorgen! Wir werden alles sehr detailliert analysieren und auch weitere Beispiele hinzufügen, damit alles so klar wie möglich wird.

XML (zusammen mit HTML) ist eines der Formate zum Speichern von Daten, sie sehen ähnlich wie HTML aus. Lassen Sie uns herausfinden, wie man sie mit JavaScript analysiert und anzeigt.

Was ist XML?

XML (eXtensible Markup Language) ist ein Textformat zum Speichern und Übertragen von Daten. Es sieht so aus:

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

Hier haben wir "Menschen", die mehrere "Menschen" mit ihrem "Namen" und "Alter" enthalten. Es ist wie eine solche Tabelle in Textform.

Lassen Sie uns nun lernen, wie man solch ein XML mit JavaScript analysiert.

Wie analysiert man XML mit JavaScript?

Es gibt mehrere Schritte, die Ihnen bei der Arbeit mit XML helfen:

1. XML-Daten abrufen: Daten können vom Server abgerufen oder einfach als Zeichenfolge in JavaScript gespeichert werden.

2. Sie in ein Objekt umwandeln: Um mit XML zu arbeiten, müssen wir es in ein Objekt umwandeln, mit dem JavaScript arbeiten kann.

3. Daten extrahieren: Danach können Sie bestimmte Werte extrahieren.

Beginnen wir mit dem einfachsten Beispiel.

Beispiel 1: Parsen einer einfachen XML-Zeile

Angenommen, wir haben eine Zeile mit XML:

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

Jetzt müssen wir es in ein Objekt umwandeln. JavaScript hat dafür ein eingebautes Objekt DOMParser.

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

Jetzt xmlDoc — ist ein Objekt, mit dem man arbeiten kann.

Extrahieren von Daten aus XML

Um Daten zu extrahieren, müssen wir XML-Knoten wie HTML-Elemente behandeln. Wir verwenden die Methode 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}`);
}

Hier gehen wir durch jede "Person" und erhalten ihren "Namen" und ihr "Alter". Als Ergebnis wird Folgendes in der Konsole angezeigt:

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

Beispiel 2: XML aus einem HTML-Dokument analysieren

Manchmal kann XML Teil einer Webseite sein, und wir müssen es direkt von dort analysieren. Stellen wir uns vor, dass unser HTML ein solches Element enthält:

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

Um dieses XML zu erhalten und zu analysieren, können wir Folgendes tun:

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}`);
}

Hier nehmen wir zuerst HTML-Inhalte und verwenden sie dann als XML.

Beispiel 3: Fehlerbehandlung

Manchmal kann XML fehlerhaft sein, und wir müssen in der Lage sein, damit umzugehen. Wenn beispielsweise ein Tag nicht geschlossen ist, kann dies einen Fehler verursachen. Um es zu verarbeiten, können Sie eine Prüfung hinzufügen:

const invalidXmlString = `<person> <name>Ivan</name> <age>25</age></person>`; // Fehler: <Personen> nicht geschlossen

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);
}

Ergebnisse

Das war's! Wir haben gelernt:

1. XML-Zeilen in JavaScript analysieren.

2. Extrahieren von Daten aus XML mit Methoden, die der Arbeit mit HTML ähneln.

3. Fehler in XML verarbeiten.

XML ist ein ziemlich altes, aber immer noch nützliches Format für den Datenaustausch. Jetzt weißt du, wie man damit mit JavaScript arbeitet! 🎉

Wenn Sie Fragen haben oder weitere Beispiele wünschen, schreiben Sie mir, ich helfe Ihnen gerne weiter! 😊