Externe JSON Datei per Javascript(Ohne Framework) in Tabelle überführen

Tiyen

Mitglied
Hallo zusammen,

habe von der Uni eine Aufgabe bekommen in der ich eine JSON datei in der verschiedene Bücher mit Attributen wie Autor, ISBN usw. enthalten sind in eine dynamische Tabelle überführen muss.

Soll so aussehen wie auf der book.png

Wie kann ich denn die JSON Datei oder den Inhalt der Datei einbinden ? Ich bin da um ehrlich zu sein komplett ahnungslos, da ich vorher noch nie damit gearbeitet habe und auch im Internet nichts steht was mir weiterhilft :(

In dem Code Schnipsel habe ich versucht die Dateien über das script tag einzubinden, weiß nicht ob das Sinn macht oder totaler Mist ist. Die JSON.parse() Funktion scheint auch nicht wirklich zu funktionieren.

HTML:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="horror_books.json"></script>
    <script type="text/javascript" src="roman_books.json"></script>
    <script>
        function createTable() {
            var url = "horror_books.json";
            var array = JSON.parse(url);
        }
    </script>
</head>
<body>
<div id="tabelle">
    <table id="buchTabelle" border="solid">
        <tr>
            <th>Autor</th>
            <th>Titel</th>
            <th>Kapitel</th>
            <th>Art des Buches</th>
            <th>ISBN</th>
            <th>Erscheinungsjahr</th>
            <th>Auflage</th>
        </tr>
    </table>
</div>

</body>
</html>
Das ist der Inhalt von einer der JSON Dateien.
Javascript:
{
"horrordata": [
{
"autor": "Stephen King","titel": "The Stand - Das letzte Gefecht","kapitel": 36,"buchart": "Taschenbuch","ISBN": 9783404134113,"erscheinungsjahr": 1992,"auflage": 3},{
"autor": "Clive Barker","titel": "Imagica ", "kapitel": 12,"buchart": "Taschenbuch","ISBN": 9783453082069,"erscheinungsjahr": 1994,"auflage": 1},{
"autor": "Clive Barker","titel": "Gyre","kapitel": 25,"buchart": "Taschenbuch","ISBN": 9783453071698,"erscheinungsjahr": 1994,"auflage": 1},{
"autor": "Nancy A. Collins","titel": "Wildes Blut","kapitel": 24,"buchart": "Hardcover","ISBN": 9783442081172,"erscheinungsjahr": 1994,"auflage": 1},{
"autor": "Dean R. Koontz","titel": "Mitternacht","kapitel": 13,"buchart": "Taschenbuch","ISBN": 9783453056602,"erscheinungsjahr": 2002,"auflage": 1},{
"autor": "Stephen King","titel": "Schwarz","kapitel": 36,"buchart": "Hardcover","ISBN": 9783453123847,"erscheinungsjahr": 2000,"auflage": 1},{
"autor": "Peter F. Hamilton","titel": "Hannibal","kapitel": 21,"buchart": "Hardcover","ISBN": 9783404232345,"erscheinungsjahr": 2001,"auflage": 11}
]
}

Könnt ihr mir vielleicht helfen ? :S
Ich verlange keine komplette Lösung, nur irgendwas, dass mir weiterhilft, denn ich will dieses Fach nicht schmeißen!
 

Anhänge

  • book.png
    book.png
    8,4 KB · Aufrufe: 26

Sempervivum

Erfahrenes Mitglied
Wenn deine JSON-Dateien serverseitig zur Verfügung stehen, würde ich es serverseitig mit PHP machen. Mit den Suchbegriffen "php parse json file" findest Du Hinweise, wie es geht. Das Umschalten zwischen den beiden Kategorien würde ich dann clientseitig mit Javascript machen.
Hast Du denn überhaupt Grundkenntnisse in PHP und Javascript?
 

Tiyen

Mitglied
Die Dateien sind nur lokal im Projektordner quasi. Das Umspringen mit JS hatte ich vor. Allerdings haben wir PHP noch überhaupt nicht behandelt, d.h. ich besitze in PHP nicht wirklich Kenntnisse :(
 

Sempervivum

Erfahrenes Mitglied
Ach so, hattest Du ja auch im Titel geschrieben. Das Lesen von Dateien mit Javascript ist auch für mich Neuland. Mit "plain javascript read local file" findet man aber problemlos Informationen darüber.
Edit: Eine fertige Lösung, um eine lokale JSON-Datei einzulesen, findest Du hier:
http://codepen.io/KryptoniteDove/blog/load-json-file-locally-using-pure-javascript
Funktioniert allerdings, soweit ich das überblicke, nur, wenn auch die HTML-Datei lokal ist (oder beide auf dem Server liegen).
 
Zuletzt bearbeitet:

Tiyen

Mitglied
Hmm in dem Beispiel wird aber die Funktion getJSON() verwendet und die stammt aus JQuery. Demnach ist das nicht das, was ich brauche :(
 

Sempervivum

Erfahrenes Mitglied
Wo denn, sehe ich nicht. In dem empfohlenen Beispiel wird JSON.parse verwendet. Er bezieht sich nur im erklärenden Text auf jQuery. Möglicher Weise hat er die jQuery-Funktion als Vorlage verwendet.
 
Zuletzt bearbeitet: