Announcement

Collapse
No announcement yet.

XML-Daten per JavaScript in HTML übergeben,ausgeben

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    XML-Daten per JavaScript in HTML übergeben,ausgeben

    Hallo Zusammen,

    ich habe folgendes "problem"
    und würde mich sehr freuen wenn ihr mir weiterhelfen könntet?!

    Ich habe folgende xml-datei:

    adressbuch.xml


    Code:
    <?xml version="1.0" encoding="UTF-8" standalone="yes"?>



<adressverwaltung>

<eintrag id="1"> nummer eins 
	<vorname>Max </vorname>
	<nachname>Mustermann</nachname>
	<strasse nr ="22"> teststr </strasse>
	<ort plz="12345"> testort </ort>
</eintrag>


<eintrag id="2"> nummer zwei 
	<vorname>Tina </vorname>
	<nachname>Neuland</nachname>
	<strasse nr ="88"> schillerstr </strasse>
	<ort plz="55555"> irgendwo </ort>
</eintrag>

</adressverwaltung>

    und folgende HTML-datei mit einem JavaScriptCode,
    der die Daten aus der XML-datei ausliest
    und mom noch auf dem bildschirm wieder ausgibt.

    Code:
    <html>

<body>

<script type="text/javascript">

	var req = new XMLHttpRequest();
	
	req.open('GET', 'adressbuch.xml', true);
	req.onreadystatechange = function() 
	{
		if (req.readyState === 4) 
		{
			var doc = req.responseXML;
			
			// entries! vs entry!
			var entries = doc.getElementsByTagName('eintrag');
			
			
			
			var ul = document.createElement('table');
    
				for (var i = 0, l = entries.length; i < l; i++) 
				{
					// entry! vs entries!
					var entry = entries[i];
									
					var vnEl = entry.getElementsByTagName('vorname')[0];					
					var naEl = entry.getElementsByTagName('nachname')[0];
					var streetEl = entry.getElementsByTagName('strasse')[0];
					var ortEl = entry.getElementsByTagName('ort')[0];
					
					
					entry.getAttribute("id")
					
					
					
					
					var li = document.createElement('li');
									
					
					li.appendChild(document.createTextNode
					(	
						
						entry.getAttribute('id')
						+
						' '
						+
						(vnEl.textContent ? vnEl.textContent : vnEl.text) 
						+
						(naEl.textContent ? naEl.textContent : naEl.text) 
						+ 
						'; '
						+
						(streetEl.textContent ? streetEl.textContent : streetEl.text) 
						+ 
						' '
						+ 
						streetEl.getAttribute('nr') 
						+ 
						'; '  
						+ 
						ortEl.getAttribute('plz')
						+						
						(ortEl.textContent ? ortEl.textContent : ortEl.text) 
						+
						' ;'
						
					
						
						
											
						
					));
										
					ul.appendChild(li);
				}
			document.body.appendChild(ul);
		}
	};

 req.send(null);

</script> 


</body>
</html>
    Nun tüftel ich gerade daran,
    diese 'function' (javaScript) und deren ausgabe

    an eine
    # HTML-tabellen,
    # an ein HTML Drop Down Box

    weiterzuleiten,
    gestalltet sich aber schwerer als gedacht ;/

    Bzw könnte man nicht diesen js-code in eine function "einpacken"
    und dann iwie weitergeben....?!

    Habt ihr tipps,codebeispiele,tutorien,......?!


    oder auch kurz gesagt^^
    ich möchte aus einer XML-Datei daten auslesen
    und diese dann an die "üblichen" HTML-objekte wie combobox, listen,tabellen,
    wieder ausgeben (also automatisch gefüllt) statt hardcoded in der html seite.




    Danke im voraus!!!
    Grüße ans forum
    Zuletzt editiert von Christian Marquardt; 28.03.2017, 06:39.
    Tags: None
  • #2
    Hallo,

    das Vorgehen ist doch prinzipiell das gleiche wie bisher. Nur musst du eben statt einer Unsorted List (ul + li) eine entsprechende Dropdownbox (select) mit ihren Options (option) zusammenbauen.

    Wo genau hast du da das Problem?

    Gruß Falk
    Wenn du denkst du hast alle Bugs gefunden, dann ist das ein Bug in deiner Denksoftware.

    Quellcode ohne ein Mindestmaß an Formatierung sehe ich mir nicht an! Ich leiste keinen Privatsupport per Mail oder PN!

    Comment

    • #3
      Hallo Falk,

      vielen Dank für deine erste antwort und hilfe!

      "problem"
      Naja, iwie weiß ich nicht so recht wie ich
      zb eine
      # tabelle
      # dropdown box

      in die bisherige "function" geschickt einbauen kann ;(




      Code:
      <form action="select.htm">
  <p>
    <select name="top5" size="3">
      <option>Heino</option>
      <option>Michael Jackson</option>
      <option>Tom Waits</option>
      <option>Nina Hagen</option>
      <option>Marianne Rosenberg</option>
    </select>
  </p>
</form>
      so der "normale" code vorbelegt mit den daten,
      aber nun, automatisch geladen aus der "function" bzw den xml daten
      stehe ich mom auf dem "schlauch" ;//

      please help,
      wieder abgebe,

      danke im voraus!

      grüße!!
      Zuletzt editiert von Christian Marquardt; 28.03.2017, 06:39.

      Comment

      • #4
        Du solltest dir mal das DOM klar machen, wenn man per document.createElement('ul') ein Liste erzeugt, dann natürlich per document.createElement('table') eine Tabelle.
        Ich gebe dir noch mal ein Beispiel für eine Tabelle, aber dann solltest du in der Lage sein, analog andere HTML-Elemente per Script zu erzeugen:
        Code:
        // zwei Hilfsfunktionen
function getTextContent(element) {
  if (typeof element.textContent !== 'undefined') {
    return element.textContent;
  }
  else if (typeof element.innerText !== 'undefined') {
    return element.innerText;
  }
  else if (typeof element.text !== 'undefined') {
    return element.text;
  }
}

function createElement(tagName, textContent, ownerDoc) {
  ownerDoc = ownerDoc || document;
  var element = ownerDoc.createElement(tagName);
  if (typeof element.textContent != 'undefined') {
    element.textContent = textContent;
  }
  else if (typeof element.innerText != 'undefined') {
    element.innerText = textContent;
  }
  return element;
}
        Code:
        // Auslesen der Daten und Erzeugen der Tabelle
var req = new XMLHttpRequest();
req.open('GET', 'eingabe.xml', true);
req.onreadystatechange = function() {
  if (req.readyState === 4) {
    var doc = req.responseXML;
    var entries = doc.getElementsByTagName('eintrag');

    var table = document.createElement('table');
    table.frame = 'box';
    table.rules = 'all';

    var thead = document.createElement('thead');
    var row = document.createElement('tr');
    row.appendChild(createElement('th', 'Name'));
    row.appendChild(createElement('th', 'Straße'));
    row.appendChild(createElement('th', 'Ort'));
    thead.appendChild(row);
    table.appendChild(thead);

    var tbody = document.createElement('tbody');

    for (var i = 0, l = entries.length; i < l; i++) {
      var entry = entries[i];
      var vnEl = entry.getElementsByTagName('vorname')[0];
      var naEl = entry.getElementsByTagName('nachname')[0];
      var streetEl = entry.getElementsByTagName('strasse')[0];
      var ortEl = entry.getElementsByTagName('ort')[0];
		
      var row = document.createElement('tr');
      row.appendChild(createElement('td', getTextContent(vnEl) + ' ' + getTextContent(naEl)));
      row.appendChild(createElement('td', getTextContent(streetEl) + ' ' + streetEl.getAttribute('nr')));
      row.appendChild(createElement('td', ortEl.getAttribute('plz') + ' ' + getTextContent(ortEl)));

      tbody.appendChild(row);
    }
    table.appendChild(tbody);
    document.body.appendChild(table);
  }
};
req.send(null);

        Comment

        • #5
          @martin

          dankeschön!!
          Werd den code durchgehen und versuchen zu verstehen, auszubauen, umzuschreiben, ergänzen, neue gui-elemente hinzufügen...

          grüße!

          Comment

          Previous template Next
          Working...
          X