Wie kann ich XML-Daten in Javascript auslesen bzw sie mit HTML visualisieren?

Hallo,

ich habe eine XML-Datei, die folgendermaßen aufgebaut ist (Ausschnitt):

                       <PerID>326</PerID>
                       <PersVName>Michael</PersVName>
                       <PersName>Pfleger</PersName>
                       <PersAkad>Dipl. theol. Dipl. psych.</PersAkad>
                       <PersSprechzeit>Mi 11-12</PersSprechzeit>
                       <PersBem />
                       <PerTitelID />
                       <Amtsdienstbez />
                       <Fid>485</Fid>
                       <FunVon />
                       <FunBis />
                       <Kontakt>
                        <ID>268</ID>
                         
                    </Personal>
    

Es handelt sich um ein Personalverzeichnis. Ich würde gerne eine Art Wochenübersicht im Browser anzeigen lassen, bei der die Sprechzeiten grafisch dargestellt sind, also quasi die Verteilung der Sprechzeiten aller Personen über die Woche hinweg.

Wie stelle ich das am besten an? Bin leider noch sehr unerfahren mit JS. Vielen Dank schon mal!

Answer 1

[weed9r]

Hi, 

jquery wurde ja schon genannt. Es ermöglicht dir, eine Xml-File in ein Javascriptobject zu parsen.

Hier ein Beispiel:

var xml = $.parseXML(deineDatei.xml),
$xml = $( xml ),
$test = $xml.find('PerID');
console.log($test.text());

lg weed9r

Comments

[rmnstr]

.find() gibt übrigens ein jQuery Objekt zurück, in welchem alle gefundenen Selektoren oder Elemente vorhanden sind.

Wenn kein Treffer erzielt wurde, ist die Länge des Objektes 0.
Wenn mehrere Treffer erzielt wurden, können diese mit $xml[index] angesprochen werden.

Answer 2

[EightSix]

Da die Datei denke ich mal am Server liegt würde ich das mit einer Serversprache (PHP/ASP/...) machen. Sonst müsstest die Datei an den Client übermitteln und der verarbeitet sie erst in seinem Browser mittels Javascript.

Comments

[msrzi]

Hallo, danke für die Antwort :-) Nein, die Datei liegt lokal bei mir auf dem Rechner.

Answer 3

[yerooke]

Mit der JavaScript-Bibliothek jQuery geht das ganz einfach:

http://jsfiddle.net/jquerybyexample/9UZUh/