JSON array aus HTML in JS array.

  • Hallo Leute! Ich versuch ein JSON array von HTML zu parsen und in ein JS array zu speichern aber hab noch nicht geschafft. Kann mir jmd helfen? Es kommt NULL raus:(
    Danke im voraus!

    Code
    1. <script type="text/template" id="bird-list">
    2. [{ "id":1, "name":"Haussperling", "latinName":"Passer domesticus", "imagePath":"resources/images/haussperling.png", "audioPath":"resources/data/audio/haussperling.ogg" },{ "id":2, "name":"Kohlmeise", "latinName":"Parus major", "imagePath":"resources/images/kohlmeise.png", "audioPath":"resources/data/audio/kohlmeise.ogg" },{ "id":3, "name":"Star", "latinName":"Sturnus vulgaris", "imagePath":"resources/images/star.png", "audioPath":"resources/data/audio/star.ogg" },{ "id":4, "name":"Amsel", "latinName":"Turdus merula", "imagePath":"resources/images/amsel.png", "audioPath":"resources/data/audio/amsel.ogg" }]
    3. </script>
    4. //in eine JS datei
    5. listOfBirds = document.querySelector("bird-list");
    6. var obj = JSON.parse(listOfBirds);
    7. console.log(obj);
  • Mit

    Code
    1. listOfBirds = document.querySelector("bird-list");

    bekommst Du nur das DOM-Element, nicht den Text darin . So funktioniert es:

    Code
    1. <script type="text/template" id="bird-list">
    2. [{ "id":1, "name":"Haussperling", "latinName":"Passer domesticus", "imagePath":"resources/images/haussperling.png", "audioPath":"resources/data/audio/haussperling.ogg" },{ "id":2, "name":"Kohlmeise", "latinName":"Parus major", "imagePath":"resources/images/kohlmeise.png", "audioPath":"resources/data/audio/kohlmeise.ogg" },{ "id":3, "name":"Star", "latinName":"Sturnus vulgaris", "imagePath":"resources/images/star.png", "audioPath":"resources/data/audio/star.ogg" },{ "id":4, "name":"Amsel", "latinName":"Turdus merula", "imagePath":"resources/images/amsel.png", "audioPath":"resources/data/audio/amsel.ogg" }]
    3. </script>
    4. <script>
    5. listOfBirds = document.getElementById("bird-list").innerText;
    6. var obj = JSON.parse(listOfBirds);
    7. console.log(obj);
    8. </script>

    Allerdings ist das ganze unnötig kompliziert. Dieses funktioniert genau so gut:

    Code
    1. <script>
    2. var listOfBirds = [{ "id": 1, "name": "Haussperling", "latinName": "Passer domesticus", "imagePath": "resources/images/haussperling.png", "audioPath": "resources/data/audio/haussperling.ogg" }, { "id": 2, "name": "Kohlmeise", "latinName": "Parus major", "imagePath": "resources/images/kohlmeise.png", "audioPath": "resources/data/audio/kohlmeise.ogg" }, { "id": 3, "name": "Star", "latinName": "Sturnus vulgaris", "imagePath": "resources/images/star.png", "audioPath": "resources/data/audio/star.ogg" }, { "id": 4, "name": "Amsel", "latinName": "Turdus merula", "imagePath": "resources/images/amsel.png", "audioPath": "resources/data/audio/amsel.ogg" }];
    3. </script>
    4. <script>
    5. console.log(listOfBirds);
    6. </script>
  • Ja da hast du recht nur ich glaube das problem sollte irgendwo anders sein. Die html Datei sieht so aus:

  • Ja genau.


  • Stimmt, aber das ist nicht der einzige Fehler:

    Code
    1. allBirds = document.getElementById(".bird-gallery"),
    2. listOfBirds = document.querySelector("bird-list").innerHTML;

    getElementById erwartet eine ID als Parameter. Hier kannst Du am sinnvollsten document.querySelector verwenden.

    document.querySelector erwartet dagegen einen CSS-Selektor, d. h. Du musst ein # voran stellen.

    Dies funktioniert:

    Code
    1. allBirds = document.querySelector(".bird-gallery"),
    2. listOfBirds = document.querySelector("#bird-list").innerHTML;
  • Hallo Jungs! Ich versuch eien Liste aus diese array zu erzeugen aber ich weiß nicht welche Befehl ich benutzen soll. Ich hab da createTextNode benutzt aber ich glaube ist nicht die richtige. Hat jemand eine Idee? Danke!

    p.s. Da lad ich zwei Bilder wie es aussehen soll und wie es bei mir momentan ausschaut.

    Code
    1. var theList = document.querySelector(".bird-list");
    2. for(var i =0; i< obj.length; i++){
    3. var item = document.createElement("li");
    4. item.appendChild(document.createTextNode(obj[i]));
    5. theList.appendChild(item);

    Dateien

    • aufgabe.jpg

      (54,05 kB, 5 Mal heruntergeladen, zuletzt: )
    • aufgabe_1.jpg

      (31,37 kB, 1 Mal heruntergeladen, zuletzt: )

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von regtan () aus folgendem Grund: Hab den Code vergessen :)

  • ja createTextNode macht genau das was es machen soll und zwar text erstellen und kein html code.


    Hoffe ich sehe das so richtig ?


    ich würde das malin der richtung versuchen

    Code
    1. var item = document.createElement("li");
    2. item.innerHTML =obj[i];
    3. theList.appendChild(item);

    Aber kann auch sein das ich da falsch liege

  • Ja das schon klar aber in css sind schon als elemente. Deswegen frag ich auch, wie kann ich die von array zugreifen.

  • Ja genau es sollte so aussehen.

  • Also ich hab es geschafft, dass die Bilder angezeigt werden aber nicht in die größe die in CSS festgestellt ist. Weiß jmd wie das geht?

    Code
    1. for(var i =0; i< obj.length; i++){
    2. item = document.createElement("li");
    3. let img = document.createElement("img");
    4. img.src = obj[i].imagePath;
    5. item.appendChild(img);
    6. theList.appendChild(item);