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
    <script type="text/template" id="bird-list">
        [{ "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" }]
    </script>


//in eine JS datei
listOfBirds = document.querySelector("bird-list");
 var obj = JSON.parse(listOfBirds);
      console.log(obj);

    Mit

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

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

    Code
    <script type="text/template" id="bird-list">
        [{ "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" }]
    </script>
    <script>
        listOfBirds = document.getElementById("bird-list").innerText;
        var obj = JSON.parse(listOfBirds);
        console.log(obj);
    </script>

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

    Code
    <script>
        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" }];
    </script>
    <script>
        console.log(listOfBirds);
    </script>

    Ja das Problem ist, dass ist eine Aufgabe und die Html Datei ist schon vorgegeben udn wir dürfen es nicht ändern. Ich hab es auch mit innerHTML probiert aber kommt fehler raus.

    Ja da hast du recht nur ich glaube das problem sollte irgendwo anders sein. Die html Datei sieht so aus:

    Ja genau.


    ja das .bird-gallery ist in CSS-datei:

    Code
    .bird-gallery {
    display: block;
    float: left;
    width: 300px;
    height: 600px;
    margin: 1em;
    overflow: hidden
}

    Stimmt, aber das ist nicht der einzige Fehler:

    Code
    allBirds = document.getElementById(".bird-gallery"),
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
    allBirds = document.querySelector(".bird-gallery"),
listOfBirds = document.querySelector("#bird-list").innerHTML;

    Ja das getElementById war eigentlich querySelector aber ich wollte mal anders probieren und hab vergessen zu ändern aber mit # vorne jezt geht. Vielen Dank!

    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
    var theList = document.querySelector(".bird-list");
          for(var i =0; i< obj.length; i++){
              var item = document.createElement("li");
              item.appendChild(document.createTextNode(obj[i]));
              theList.appendChild(item);

    Einmal 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
     var item = document.createElement("li");
               item.innerHTML =obj[i];
   
              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.

    Soll die Liste im Browser hinterher so aussehen wie in aufgabe.jpg? Dann brauchst Du in jedem Listenelement das Bild, den deutschen und den lateinischen Namen und das "+"-Symbol.

    Und in dem CSS in posting #14 vermisse ich das Bild.

    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
    for(var i =0; i< obj.length; i++){
            item = document.createElement("li"); 
              let img = document.createElement("img");
              img.src = obj[i].imagePath;
              item.appendChild(img);
              theList.appendChild(item);

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden