HTML Tabelle aus XML erzeugen

empsim · 26. Oktober 2018

Hallo Zusammen,

ich möchte die Inhalte aus einer XML Datei in einer HTML Tabelle darstellen was laut Netz ganz einfach mit einem Javascript gehen sollte, allerdings bleibt bei mir die Tabelle leer und ich verstehe nicht warum.

HTML:

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Mediathek</title>
        <link href="style.css" rel="stylesheet"/>
<script>
    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "tabelle.xml",
            dataType: "xml",
            success: function(xml){
                $(xml).find('CD').each(function(){
                    var title = $(this).find('title').text();
                    var movie = $(this).find('movie').text();
                    var year = $(this).find('year').text();
                    $('<tr></tr>').html('<th>' +title+ '</th><td>$' +movie+ '</td><td>$' +year+ '</td>').appendTo('#disney_archiv');
                });
            }
        });
    });
</script>

</head>
<body>

         <table id = "disney_archiv">
            <tr><th>title</th><th>movie</th><th>year</th><th>video</th>
            </tr>
            </table>

</body>
</html>

XML:

<?xml version="1.0" encoding="utf-8" ?>

<songs>

<CD>   
  <title>Poor Unfortunate Souls</title>
  <movie>The Little Mermaid</movie>
  <year>1989</year>
  <video>https://www.youtube.com/watch?v=xfkkMHieqcI</video>
</CD>
<CD>
  <title>Tale As Old As Time</title>
  <movie>Beauty And The Beast</movie>
  <year>1991</year>
  <video>https://www.youtube.com/watch?v=uQ0ODCMC6xs</video>
</CD>
<CD>
  <title>Be Prepared</title>
  <movie>The Lion King</movie>
  <year>1994</year>
</CD>
<CD>
  <title>Arabian Nights</title>
  <movie>Aladdin</movie>
  <year>1992</year>
</CD>
<CD>
  <title>Friend Like Me</title>
  <movie>Aladdin</movie>
  <year>1992</year>
</CD>
<CD>
  <title>I Just Can't Wait To Be King</title>
  <movie>The Lion King</movie>
  <year>1994</year>
</CD>
<CD>
  <title>A Star Is Born</title>
  <movie>Hercules</movie>
  <year>1997</year>
</CD>

</songs>

Ist in dem Script ein Fehler? Bin für jede Hilfe dankbar.

Viele Grüße
Simon

Crast · 26. Oktober 2018

Heyho!

du musst im Header noch jQuery einbinden.

Download: https://jquery.com/download/

Wenn es im selben verzeichnis wie deine index.html liegt, de Header wie folgt gestalten

HTML:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Mediathek</title>
    <link href="style.css" rel="stylesheet"/>

    <script src="jquery-3.3.1.min.js"></script>

    <script>


        $(document).ready(function(){
            $.ajax({
                type: "GET",
                url: "tabelle.xml",
                dataType: "xml",
                success: function(xml){
                    $(xml).find('CD').each(function(){
                        var title = $(this).find('title').text();
                        var movie = $(this).find('movie').text();
                        var year = $(this).find('year').text();
                        $('<tr></tr>').html('<th>' +title+ '</th><td>$' +movie+ '</td><td>$' +year+ '</td>').appendTo('#disney_archiv');
                    });
                }
            });
        });
    </script>

</head>

Bei mir erfolgreich getestet.

Tipp für das nächste mal: Mit F12 kannst du die Entwickler-Tools deines Brwoser öffnen, dort werden dir in der Konsole hilfreiche Informationen angezeigt.

Momentan müsste da etwas stehen wie "ReferenceError: $ is not defined index.html:13:9"
Was soviel heist, das deine Referenz "$" nicht definiert ist.

$ kommt ovn jQuery.

empsim · 27. Oktober 2018

Crast schrieb:
Heyho!

du musst im Header noch jQuery einbinden.

Download: https://jquery.com/download/

Wenn es im selben verzeichnis wie deine index.html liegt, de Header wie folgt gestalten

HTML:

<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Mediathek</title> <link href="style.css" rel="stylesheet"/> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $.ajax({ type: "GET", url: "tabelle.xml", dataType: "xml", success: function(xml){ $(xml).find('CD').each(function(){ var title = $(this).find('title').text(); var movie = $(this).find('movie').text(); var year = $(this).find('year').text(); $('<tr></tr>').html('<th>' +title+ '</th><td>$' +movie+ '</td><td>$' +year+ '</td>').appendTo('#disney_archiv'); }); } }); }); </script> </head>

Bei mir erfolgreich getestet.

Tipp für das nächste mal: Mit F12 kannst du die Entwickler-Tools deines Brwoser öffnen, dort werden dir in der Konsole hilfreiche Informationen angezeigt.

Momentan müsste da etwas stehen wie "ReferenceError: $ is not defined index.html:13:9"
Was soviel heist, das deine Referenz "$" nicht definiert ist.

$ kommt ovn jQuery.

super, vielen Dank

Suche

HTML Tabelle aus XML erzeugen

empsim

Cadet 4th Year

Crast

Ensign

empsim

Cadet 4th Year

Ähnliche Themen