Daten werden mit Javascript nicht in html Tabelle gelesen

Diskutiere Daten werden mit Javascript nicht in html Tabelle gelesen im JavaScript Forum im Bereich Programmierung; Hallo, ich habe aus einer Datenbank eine .xml Datei generiert. Die Daten dieser Datei möchte ich in eine Tabelle in html einlesen. ICh habe eine...
Neues Thema erstellen Antworten
  • Daten werden mit Javascript nicht in html Tabelle gelesen Beitrag #1
C
CodiD
New member
Beiträge
3
Punkte Reaktionen
0
Hallo,

ich habe aus einer Datenbank eine .xml Datei generiert. Die Daten dieser Datei möchte ich in eine Tabelle in html einlesen. ICh habe eine Tabelle in html erstellt und ich habe den JavaScript Code integriert. Im letzten Absatz des Skript Codes scheint ein Fehler zu sein, da die Daten nicht ausgelesen werden. Ich bin sehr dankbar für einen HInweis.

Hier ein Auszug aus der xml Datei
Code: 
 <database name="vorlagebuecherei">
        <!-- Tabelle kunde -->
        <table name="kunde">
            <column name="id">1</column>
            <column name="name">Ramos</column>
            <column name="vorname">Collin</column>
            <column name="telefon">0209- 12345</column>
            <column name="strasse">Terpetinweg</column>
            <column name="hausnummer">2a</column>
            <column name="plz">44649</column>
            <column name="ort">Gelsenkirchen</column>
        </table>
        <table name="kunde">
            <column name="id">2</column>
            <column name="name">Meier</column>
            <column name="vorname">Klara</column>
            <column name="telefon">04521- 45623</column>
            <column name="strasse">Sonnenstr.</column>
            <column name="hausnummer">34</column>
            <column name="plz">44649</column>
            <column name="ort">Gelsenkirchen</column>
        </table>
        <table name="kunde">
            <column name="id">3</column>
            <column name="name">Hechtner</column>
            <column name="vorname">Gina</column>
            <column name="telefon">0209- 28945</column>
            <column name="strasse">Gelsenweg</column>
            <column name="hausnummer">1</column>
            <column name="plz">44649</column>
            <column name="ort">Gelsenkirchen</column>
        </table>
        <table name="kunde">
            <column name="id">4</column>
            <column name="name">Hamster</column>
            <column name="vorname">Kristian</column>
            <column name="telefon">0209- 78456</column>
            <column name="strasse">Riedallee</column>
            <column name="hausnummer">23</column>
            <column name="plz">44649</column>
            <column name="ort">Gelsenkirchen</column>
        </table>
        <table name="kunde">
            <column name="id">5</column>
            <column name="name">Pirata</column>
            <column name="vorname">Ridwan</column>
            <column name="telefon">0209- 55567</column>
            <column name="strasse">Robinstr.</column>
            <column name="hausnummer">82</column>
            <column name="plz">44649</column>
            <column name="ort">Gelsenkirchen</column>
        </table>
        <table name="kunde">
            <column name="id">6</column>
            <column name="name">Schaller</column>
            <column name="vorname">Josefine</column>
            <column name="telefon">0209- 783421</column>
            <column name="strasse">Grenzweg</column>
            <column name="hausnummer">31</column>
            <column name="plz">44649</column>
            <column name="ort">Gelsenkirchen</column>
        </table>
        <table name="kunde">
            <column name="id">7</column>
            <column name="name">Bertrecht</column>
            <column name="vorname">Anna</column>
            <column name="telefon">0209- 187698</column>
            <column name="strasse">Grenzweg</column>
            <column name="hausnummer">5</column>
            <column name="plz">44649</column>
            <column name="ort">Gelsenkirchen</column>
        </table>
        <table name="kunde">
            <column name="id">8</column>
            <column name="name">Tollski</column>
            <column name="vorname">Petra</column>
            <column name="telefon">0209- 678345</column>
            <column name="strasse">Rollstr.</column>
            <column name="hausnummer">44</column>
            <column name="plz">44649</column>
            <column name="ort">Gelsenkirchen</column>
        </table>
    </database>

Der script Teil in html sieht so aus:
Code: 
<script>
        $(document).ready(function() {
            $.ajax({
                type: "GET",
                url: "Inhalt.xml",
                dataType: "xml",
                success: function(xml) {
                    $(xml).find('CD').each(function() {
                        var name = $(this).find('name').text();
                        var vorname = $(this).find('vorname').text();
                        var telefon = $(this).find('telefon').text();
                        var strasse = $(this).find('strasse').text();
                        var hausnummer = $(this).find('hausnummer').text();
                        var plz = $(this).find('plz').text();
                        var ort = $(this).find('ort').text();
                        $('#kundenuebersicht').append(
                            '<td>' + name + '</td>' +
                            '<td>' + vorname + '</td>' +
                            '<td>' + telefon + '</td>' +
                            '<td>' + strasse + '</td>' +
                            '<td>' + hausnummer + '</td>' +
                            '<td>' + plz + '</td>' +
                            '<td>' + ort + '</td>'
                        );
                    });
                }
            });
        });
    </script>


Der Tabellenteil in html sieht so aus:

Code: 
<body>
    <table id="kundenuebersicht">
        <tr>
            <th>Name</th>
            <th>Vorname</th>
            <th>Telefon</th>
            <th>Strasse</th>
            <th>Hausnummer</th>
            <th>PLZ</th>
            <th>Ort</th>

        </tr>
    </table>

</body>

Wenn ich die Seite laufen lasse, wird nur die leere Tabelle angezeigt.

Vielen Dank für Tipps:)
 
Zuletzt bearbeitet:
  • Daten werden mit Javascript nicht in html Tabelle gelesen Beitrag #2
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Ohne es getestet zu haben: Ich finde in dem XML keinen Tagnamen 'CD'.
 
  • Daten werden mit Javascript nicht in html Tabelle gelesen Beitrag #3
A
AndreasB
Well-known member
Beiträge
75
Punkte Reaktionen
4
Ich sehe in deinem XML Tree kein Element mit dem Tag CD, das du hier suchst:
Javascript: 
 $(xml).find('CD')
Möchtest du nicht Jeden table Tag durchgehen?
Außerdem greifen deine Selektoren .find('name') etc nicht, da du keine Tags mit diesem Namen in deinem Tree hast.

Gib dir mal in der Konsole jedes Ergebnis von find() aus, bevor du damit weiter arbeitest.
 
  • Daten werden mit Javascript nicht in html Tabelle gelesen Beitrag #4
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Davon abgesehen würde das Ganze sehr viel einfacher, wenn Du JSON statt XML nehmen würdest. Und auf jQuery kann man auch verzichten.
Code: 
fetch('inhalt.json')
    .then(response => response.json())
    .then(data => {
        data.forEach(item => {
            const html = `
            <tr>
                <td>${item.name}</td>
                <td>${item.vorname}</td>
                <td>${item.telefon}</td>
                <!-- usw. -->
            </tr>
            `;
            document.querySelector('#kundenübersicht tbody').insertAdjacentHTML('beforeend', html);
        });
    });
(ungetestet)
 
Zuletzt bearbeitet:
  • Daten werden mit Javascript nicht in html Tabelle gelesen Beitrag #6
C
CodiD
New member
Beiträge
3
Punkte Reaktionen
0
Sempervivum schrieb:
Davon abgesehen würde das Ganze sehr viel einfacher, wenn Du JSON statt XML nehmen würdest. Und auf jQuery kann man auch verzichten.
Code: 
fetch('inhalt.json')
    .then(response => response.json())
    .then(data => {
        data.forEach(item => {
            const html = `
            <tr>
                <td>${item.name}</td>
                <td>${item.vorname}</td>
                <td>${item.telefon}</td>
                <!-- usw. -->
            </tr>
            `;
            document.querySelector('#kundenübersicht tbody').insertAdjacentHTML('beforeend', html);
        });
    });
(ungetestet)
Zum Vergrößern anklicken....
Jupp, das weiss ich. Es geht mir aber in diesem konkreten Fall darum, ein .xml einzubinden.
 
Thema:

Daten werden mit Javascript nicht in html Tabelle gelesen

Oben Unten