XML parsen in JS

[Viktor (Gast)]

Hallo Leute.

Ich habe eine Frage an die Programmierer/Skripter unter Euch.

Ich möchte eine XML-Datei mittels Javascript auslesen.
Dabei soll ein HTML-Input dazu dienen, den eingegebenen Wert in allen 
Nodes des XML zu suchen und vom gefundenen Element alle Werte ausgeben.

XML:

<system-data-structure>
  <staff-listing>
    <section>1</section>
    <abbr>AK</abbr>
    <name>Anna</name>
        </staff-listing>
        <staff-listing>
    <section>1</section>
    <abbr>KW</abbr>
    <name>Bernd</name>
        </staff-listing>
</system-data-structure>

Gebe ich nun in das Inputfeld in HTML (<input type="text" id="term">) 
z.B. "Be" (für Bernd) ein und klicke auf den Search-Button, soll in die 
div "result" der komplette Datensatz von "Bernd" aufgelistet werden, 
also Section, Abbr und Name.

Könnt ihr mir weiterhelfen?

Vielen Dank!

[Georg M. (g_m)]

Es muss irgendwie mit String funktionieren
https://www.w3schools.com/js/js_string_methods.asp

[Jan H. (j_hansen)]

In welcher Umgebung? NodeJS, IE6,...

Ich würde mir jQuery reinziehen, damit geht XML parsen und Knoten 
selektieren einfach und über verschiedene Umgebungen hinweg zuverlässig.

[Nop (Gast)]

Viktor schrieb:

> Dabei soll ein HTML-Input dazu dienen, den eingegebenen Wert in allen
> Nodes des XML zu suchen und vom gefundenen Element alle Werte ausgeben.

Bedenke, daß das für eine Handvoll Datensätze sicherlich gehen wird, 
aber für größere Datenmengen wird das schnarchlangsam, egal wie gut Dein 
Auswerter geschrieben ist. XML ist als Datenbankformat ungeeignet.

[Daniel A. (daniel-a)]

Nur mal eben schnell zusammengehackt:
https://jsfiddle.net/ppjuuhg7/

[Viktor (Gast)]

Hi!

>Nur mal eben schnell zusammengehackt:
Wow, stark, das hilft schon mal.

Allerdings parst der nur nach dem eingegebenen "Name" und nicht nach dem 
Rest, nach dem gesucht werden kann, oder?

[Daniel A. (daniel-a)]

Einfach die Filter arrow function anpassen.
Entweder checks für die anderen Felder hinzufügen: 
https://jsfiddle.net/ppjuuhg7/3/
Oder einfach über den gesammten Text suchen: 
https://jsfiddle.net/ppjuuhg7/2/
Diese varianten können aber erst mit nur einem Suchbegriff umgehen.

[Viktor (Gast)]

Hallo Daniel, vielen Dank erstmal für deine Mühe!

Ich habe nun mal deinen Code entsprechend an die Suchfelder angepasst, 
die durchsucht werden sollen.

Ich habe sie entsprechend in update() geschrieben.

Ich schicke hier mal meinen Code, damit man das vielleicht besser 
nachvollziehen kann.

Entscheidend ist index.html,   data/data.xml und js/search.js.

Bei mir läuft das irgendwie nicht wie es soll, da nichtmal irgendeine 
Augabe stattfindet wie bei dir. :(


Kannst du helfen?

Danke!

[Daniel A. (daniel-a)]

Die Daten in der Datei data.xml müssen irgendwie geladen werden. Dies 
ist mit den fetch oder XMLHttpRequest APIs möglich. Zudem müssen die 
Teile des Scripts, welche auf HTML elemente zugreifen, erst ausgeführt 
werden, nachdem diese geladen wurden. Dazu kann man die Ausführung des 
gesamten Scriptes zu dem Zeitpunkt verzögern, an welchem die ganze HTML 
Datei geladen wurde, indem man das defer attribut des Script tags 
verwendet. Ich habe deinen Code mal noch etwas Angepasst, siehe Anhang.

Ganz Ideal ist es aber noch nicht. Einige der APIs, wie z.B. die 
DOMParser API funktionieren nur in relativ neuen Browsern. Das 
eingelesene XML Document dient nur dem Speichern von Daten, aber auf 
diese zuzugreifen ist relativ Umständlich. Eventuell würde es sinn 
machen dieses in ein DTO oder POJO umzuwandeln, um einfacher mit den 
Daten umgehen zu können, oder statt XML Json zu verwenden. Und falls die 
GUI Complexer werden sollte könnten Templating Frameworks nützlich 
werden.

[aditya singh (Gast)]

https://www.welookups.com/js/js_string_methods.html