Roadster: Texte aus XML-Datei mit Absätzen versehen?

Hallo miteinander!

Bislang hatte ich es so gehandhabt, dass ich die Texte für meine Webseite aus externen txt-Datein per JavaScript eingebunden habe, aber angesichts der Fülle an Material erscheint es mir irgendwie praktischer, statt 1001 Textdateien auf Vorrat zu halten, statt dessen die Texte in eine (oder auch mehrere - jedenfalls < 1001) XML-Datei(en) zu packen...

Während mein JS-Code zum einbinden der Texte bislang so aussah

function openTextBox1(){  
var request=new XMLHttpRequest();  
request.open("get","text1.txt");  
request.send();  
request.addEventListener("load",function(e){  
var text=e.target.responseText;  
addTextBox("titel1",text);});}

habe ich nun einmal Folgendes versucht

function openTextBox1(){  
var request=new XMLHttpRequest();  
request.open("get","text.xml");  
request.send();  
request.addEventListener("load",function(e){  
var xmlNodes=e.target.responseXML;  
var doc=xmlNodes.getElementsByTagName("TEXT1");  
var txt="";  
for(i=0;i<doc.length;i++){  
var text=txt+doc[i].childNodes[0].nodeValue;}  
addTextBox("titel1",text);});}

wobei die XML-Datei so ausschaut:

<?xml version="1.0" encoding="UTF-8"?>  
<TEXTE>  
   <TEXT1>  
      Test Text Test Text Test Text  
   </TEXT1>  
</TEXTE>

Ohne dass ich genau verstehen würde warum, funktioniert das auch und der Text wird in die (mittels der Funktion addTextBox(Parameter für Titel, Parameter für Text); dynamisch erstellte DIV-Box geladen und richtig angezeigt.

Das Problem, dass ich nun habe ist, dass ich in meine Texte zumindest ein Minimum an Struktur bringen, sprich, Absätze einfügen muss!

Bislang war das mit der zuerst dargelegten Methode kein Problem: Da habe ich einfach an den entsprechenden Stellen im Text (in den externen txt-Dateien) <br> eingefügt.

Das funktioniert aber mit XML natürlich nicht mehr, da jedes <br> als neuer Knoten angesehen wird, der sein End-TAG benötigt (was wiederum mit HTML kollidiert).

Ich nehme an, ich müsste also die einzelnen Absätze eines Textes in der XML-Datei auf mehrere
Nodes verteilen, also etwa so

<?xml version="1.0" encoding="UTF-8"?>  
<TEXTE>  
   <TEXT1ABS>  
        Test Text Abs 1 Test Text Abs 1  
   </TEXT1ABS>  
   <TEXT1ABS>  
        Test Text Abs 2 Test Text Abs 2  
   </TEXT1ABS>  
</TEXTE>

um dann in der JS-Funktion an entsprechender Stelle irgendwie ein var text=txt+ +"<br>"+ +"<br>"; oder so ähnlich einzufügen. Aber ich bekomme es, im wesentlichen natürlich aufgrund meiner mangelhaften JS-Kenntnisse, einfach nicht gebacken, die Funktion so zu schreiben, dass ALLE Nodes aus der XML-Datei hintereinander weg dargestellt werden, sondern wenn überhaupt, dann immer nur der 'letzte' gleichnamige Knoten aus der Node-List...

Falls jemand mir sagen könnte, wie ich die JS-Funktion für den erstrebten Zweck umschreiben kann, oder jemand eine Idee hat, die Absätze auf andere Art (in XML direkt?) einzufügen, sei ihm oder ihr mein Dank sicher! ;)

Beste Grüße,

Roadster.

  1. Lieber Roadster,

    Bislang hatte ich es so gehandhabt, dass ich die Texte für meine Webseite aus externen txt-Datein per JavaScript eingebunden habe

    das bedeutet, ohne JavaScript ist die Seite unbenutzbar und Suchmaschinen finden darauf (wahrscheinlichst) keine Inhalte?

    Warum sollte/muss das so sein?

    Liebe Grüße,

    Felix Riesterer.

    --
    "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
    1. Hallo Felix!

      Warum sollte/muss das so sein?

      Die Seite beinhaltet ein 'Lernprogramm' für mein Studienfach (Jura), dass außer von mir selbst und einigen wenigen eingeweihten Mitstudenten (voraussichtlich) von niemandem genutzt (werden) wird.

      Die Seite wird vom USB-Stick geladen und wie ein normales Programm genutzt (nur eben mit dem Browser als darstellendes Medium und der vagen 'Option', das ganze vielleicht irgendwann in unbestimmter Zukunft einmal online zu stellen).

      Die ganze Funktionalität der Seite beruht auf JavaScript: Die allermeisten Features, die den Mehrwert der Seite (des Programms) für mich (und andere) ausmachen, sind ohne JS nicht (oder nur sehr schwer) zu realisieren.

      Da die Seite nun also ohne JS sowieso nicht funktioniert (und jedenfalls ohne immensen Mehraufwand wohl auch nicht funktionieren kann) und weil aufgrund der Thematik sprichwörtlich (zehn-)tausende Zeilen Text einzubinden sind, wäre es extrem unpraktikabel (und auch Performance-technisch unvorteilhaft) die HTML-Datei damit zuzukleistern.

      Besser dann doch, ich lade die Texte immer nur dann ins Programm, wenn sie auch wirklich benötigt werden...

      Die Frage wie das am besten zu realisieren sei, ist darum Gegenstand meiner Fragestellung. ;)

      Beste Grüße,

      Roadster.

  2. hi,

    Bislang war das mit der zuerst dargelegten Methode kein Problem: Da habe ich einfach an den entsprechenden Stellen im Text (in den externen txt-Dateien) <br> eingefügt.

    <br> steht für brrr... für Absätze hingegen ist <p> zuständig.

    Idee: Sende in der Ajax-Response ein Array, jede Zeile ist ein Array-Element. In der Callback-Funktion erzeugst Du dann mit jedem Array-Element einen <p>-Knoten und baust den Text da ein, mit jQuery ist das ratzfatz erledigt.

    MfG

    1. Aloha ;)

      mit jQuery ist das ratzfatz erledigt.

      Und mit vanilla-JavaScript dauerts auch nur unwesentlich länger.

      Tut mir leid - ich sehe mich immer genötigt, das richtigzustellen, wenn jQuery ohne Alternative genannt wird. Vor allem bei so recht trivialen Aufgaben.

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
    2. hi,

      Hallo hotti!

      <br> steht für brrr... für Absätze hingegen ist <p> zuständig.

      Ok. Nennen wir es statt Absatz Zeilenumbruch...

      Idee: Sende in der Ajax-Response ein Array, jede Zeile ist ein Array-Element. In der Callback-Funktion erzeugst Du dann mit jedem Array-Element einen <p>-Knoten und baust den Text da ein, mit jQuery ist das ratzfatz erledigt.

      Wie ich schon in meinem Eingangspost erwähnte, habe ich schon die verwendete Funktion nicht zur Gänze verstanden, sondern sie nur aus einem Turorial abgeschrieben bzw. eine seinerzeit von UnitedPower1 gepostete Funktion mit Hilfe eines Tutorials abgewandelt. Wüsste ich, was ich tue, hätte ich sicherlich nicht so ein "triviales" Problem! ;)

      Wurschtele nun schon seit Stunden daran herum, aber ich bekomme entweder nur den Text aus dem 'letzten' von mehreren gleichnamigen XML-Tags angezeigt, oder 'undefined'.

      Deine Idee ist wohlgemeint, fällt bei mir aber leider nicht auf fruchtbaren Boden...
      (...und jQuery & Co. sind gegen meine Religion...)

      Beste Grüße,

      Roadster.

      1. hi,

        Deine Idee ist wohlgemeint, fällt bei mir aber leider nicht auf fruchtbaren Boden...
        (...und jQuery & Co. sind gegen meine Religion...)

        jQuery ist ja auch nicht alles und Alternativen gibt es immer. Hier ist ein Beispiel, wo ca 100 Texte, schön verpackt in eine mit ebenfalls mit textlichen Mitteln strukturierte 'Datei' über ein Select-Feld in den Browser geladen werden. Die 'Datei' ist in das HTML-Dokument eingebettet, wenn Du in den Quellcode schaust, ab

        <!-- ~~~~~~~~~~~~~~~ PerlDoc percent encoded ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div id="perldoc" style="display:none">

        bis zum </div></body></html> bei etwa Zeile 6500. Insgesamt hat perldoc.html ca 300 kB; 1001 Texte ergeben schätzungsweise 3 MB und damit geht das sicher auch noch.

        MfG

        1. hi,

          jQuery ist ja auch nicht alles und Alternativen gibt es immer. Hier ist ein Beispiel, wo ca 100 Texte, schön verpackt in eine mit ebenfalls mit textlichen Mitteln strukturierte 'Datei' über ein Select-Feld in den Browser geladen werden. Die 'Datei' ist in das HTML-Dokument eingebettet...

          Hi Hotti,

          sorry, also ich habs mir angesehen, aber das übersteigt mein Verständnis der Materie so etwa um den Faktor 10.000!

          Ich geb's auf: Den ganzen verd.. Tag damit verplempert und nicht einen Millimeter weitergekommen.

          Ich hole mir mit getElementsByTagName die Nodes aus der XML-Datei, kann mir mit alert() deren Anzahl anzeigen lassen ( .length ) und ich kann mir mit childNodes.nodeValue den Inhalt des (einzigen oder) letzten Knotens und mit firstChild.nodeValue den Inhalt des ersten Knotens korrekt anzeigen... Aber obwohl ich nun schon hunderte Tutorials und Beispiele zum Thema for-Schleife angesehen habe, begreife ich immernoch nicht, wie's funktioniert! Was hat die [0] zu bedeuten? Was muss in die () und was in die {} - ich begreife es einfach nicht... schätze, ich bin einfach zu dämlich dafür!

          Ich habe die Liste der Elemente mit einem bestimmten TAG-Name und ich kann aus einem TAG den Inhalt auslesen, dann müsste es doch mit einer völlig simplen for-Schleife möglich sein, diesen Vorgang eben für alle Nodes aus der Liste zu wiederholen, aber ich begreife einfach nicht, wie das funktioniert! Ich meine, eingentlich hätte ich mittlerweile schon per Zufall auf die richtige Zeichenkombination kommen müssen! :(

          Sei's drum, ich dachte, das wäre mit 'nem simplen Zweizeiler beantwortet, aber offenbar bin ich entweder zu dumm oder die Sache ist doch wesentlich komplizierter als ich gedacht hatte, jedenfalls komme ich so nicht weiter und ich habe schon zuviel Zeit, die ich nicht habe, da rein investiert...

          Trotzdem vielen Dank für die Mühe,

          Gruß,

          Roadster.

          1. Hallo Roadster,

            Ich geb's auf: Den ganzen verd.. Tag damit verplempert und nicht einen Millimeter weitergekommen.

            ... Was hat die [0] zu bedeuten? Was muss in die () und was in die {} - ich begreife es einfach nicht... schätze, ich bin einfach zu dämlich dafür!

            du solltest allmählich mal einen Blick in die Doku werfen. Themen: Arrays für [], Schleifen für {} und Funktionen für ().

            Gruß, Jürgen

            1. Hallo Roadster,

              Hallo Jürgen

              du solltest allmählich mal einen Blick in die Doku werfen. Themen: Arrays für [], Schleifen für {} und Funktionen für ().

              ...da habe ich schon mehr als einen Blick drauf geworfen, aber auch wenn ich die Grundzüge vielleicht ansatzweise begriffen habe (außer das mit der [0]), heißt das nicht, dass ich den Bezug zu meinem Problem hier herstellen könnte.

              Ich meine

              var request=new XMLHttpRequest(); // 'neue Anfrage'...  
              request.open("get","text.xml"); // ..mit dem Inhalt: 'öffne text.xml'...  
              request.send(); // ...schick die Anfrage los...  
              request.addEventListener("load",function(e){ // ... wenn die Antwort da ist, dann...  
              var xmlNodes=e.target.responseXML; // ... verpacke die Antwort in der Variablen xmlNodes...  
              var doc=xmlNodes.getElementsByTagName("TEXT1"); // ...suche daraus die gesuchten TAGs heraus...  
              // ... und verpacke sie in die Variable 'doc'...  
              var txt=""; // bereite var txt vor, damit die Ausgabe als Text angezeigt werden kann...  
              for(i=0;i<doc.length;i++){ // gehe durch die liste der gesuchten TAGs in 'doc'...  
              var text=txt+doc[i].childNodes[0].nodeValue;} // und fasse die Inhalte in der var text zusammen...  
              alert(text) // ... und zeige mir das Ergebnis.
              

              und es funktioniert eben nicht...

              Es bringt mir gar nicht tausende abstrakt formulierter Doku- und Tutorial-Einträge zu studieren, wenn ich den Bezug nicht herstellen kann: Für mich sieht das so aus als müsste es funktionieren.
              Tut es aber nicht.

              Also...

              Gruß,

              Roadster.

              1. Hallo Roadster,

                var txt=""; // bereite var txt vor, damit die Ausgabe als Text angezeigt werden kann...
                for(i=0;i<doc.length;i++){ // gehe durch die liste der gesuchten TAGs in 'doc'...
                var text=txt+doc[i].childNodes[0].nodeValue;} // und fasse die Inhalte in der var text

                var text legt die Variable text bei jedem Schleifendurchlauf neu an.
                Versuch mal

                var txt="";  
                for(i=0;i<doc.length;i++) {  
                  txt += doc[i].childNodes[0].nodeValue;  
                }
                

                Gruß, Jürgen

                1. Hallo Roadster,

                  Hallo Jürgen

                  var text legt die Variable text bei jedem Schleifendurchlauf neu an.

                  Das war das fehlende Puzzle-Teil! DIE Info hat gefehlt!

                  Versuch mal

                  var txt="";

                  for(i=0;i<doc.length;i++) {
                    txt += doc[i].childNodes[0].nodeValue;
                  }

                    
                  `txt += doc[i].childNodes[0].nodeValue+"<br>";`{:.language-javascript} für einfachen Umbruch!  
                    
                  und  
                    
                  `txt += doc[i].childNodes[0].nodeValue+"<br><br>";`{:.language-javascript} für Zeilenabstand!  
                    
                  und es funktioniert perfekt!!!  
                    
                  Soviel zum Thema "Zweizeiler" als Antwort! ;)  
                    
                  Vielen, vielen Dank!  
                    
                  Gruß,  
                    
                  Roadster.
                  
          2. moin,

            Trotzdem vielen Dank für die Mühe,

            Als kleine Gegenleistung: Wie machst Du die Navigation über 1001 verschiedene Inhalte?

            MfG

  3. Hallo Roadster,

    kennst du schon

    dises Einführung ? Aber bis zum Ende lesen :) .

    Dazu zwei Anmerkungen von mit:

    Wenn bzw. da Tags in den XML-Tags Probleme machen, kannst du den Inhalt der XML-Elemente als CDATA ausszeichnen, oder einfach &lt;br&gt; schreiben.

    Ich hatte damals das Problem, das Dateien von der Festplatte nicht als xml, sondern als Plain-Text ausgeliefert wurden, Abhilfe war responseText und DOMParser

    Gruß, Jürgen