Ja genau das ist es aber wie macht man das?
JSON array aus HTML in JS array.
-
-
-
Super! Vielen Dank!
-
Was benutzt man dann für String? Weil ich versuch jetz noch namen dazu hinzufügen aber da kommt der Fehler : BirdingApp.js:41 Uncaught TypeError: Cannot create property 'createTextNode' on string 'Haussperling'
Code
Alles anzeigenfor(var i =0; i< obj.length; i++){ item = document.createElement("li"); let img = document.createElement("img"), name = document.createElement("name"); name = obj[i].name; name.className = "bird-name"; img.src = obj[i].imagePath; img.className = "bird-image"; item.appendChild(img); item.appendChild(name); theList.appendChild(item);
-
-
Sempervivum : benutzt man nicht auf dem Element classList.add('klassennamen') ?
-
Ja, das ist richtig. Aber hier erzeugt er ja das Element gerade neu und es kann noch keine andere Klasse vorhanden sein.
-
Ich hab erst jetzt gemerkt das auf HTML ein template für die Angabe schon fertig steht
Weiß jemand wie genau benutzt man des?Code
Alles anzeigen<script type="text/template" id="bird-list-entry"> <li class="bird-list-entry" bird-id="<%= id %>"> <img src="<%= imagePath %>" class="bird-image" /> <div class="bird-description"> <span class="bird-name"><%= name %></span> <span class="bird-latin-name"><%= latinName %></span> </div> <span class="add-bird-button"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </span> </li> </script>
-
Was ist denn das für Template? Für ein CMS? Oder ist es selbst gemacht nur für diese Aufgabe?
-
Das ist nur für diese Aufgabe. Also ich muss diese Template benutzen und die Angaben von Array benutzen damit die Liste seo aussieht wie auf den JPG. Aber ich weiß nicht wie man so ein Template benutzt.
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Birding App</title> <link rel="stylesheet" href="resources/css/styles.css"> <link rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css"> </head> <body> <header> <ul class="menu"> <li><i class="fa fa-binoculars" aria-hidden="true"></i></li> </ul> <h1 class="title">Birding App</h1> </header> <div class="decal"></div> <content> <div class="bird-gallery"> <input type="text" class="bird-search" /> <ul class="bird-list"> </ul> </div> <div class="bird-counter"> <ul class="bird-list"> </ul> </div> </content> <footer> <p> Die verwendeten Bilddateien entstammen den <a href="https://commons.wikimedia.org/wiki/Main_Page" target="_new">Wikimedia Commons</a>. Die Audio-Aufzeichnungen sind dem <a href="http://www.tierstimmenarchiv.de/" target="_new">Tierstimmenarchiv</a> des <a href="http://www.naturkundemuseum.berlin/" target="_new">Naturkundemuseums Berlin</a> entnommen.<p/> <p>Bei der Implementierung der Anwendung wurde <a href="http://underscorejs.org/">underscore.js</a> eingesetzt.</p> </footer> <script type="text/template" id="bird-list-entry"> <li class="bird-list-entry" bird-id="<%= id %>"> <img src="<%= imagePath %>" class="bird-image" /> <div class="bird-description"> <span class="bird-name"><%= name %></span> <span class="bird-latin-name"><%= latinName %></span> </div> <span class="add-bird-button"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </span> </li> </script> <script type="text/template" id="bird-counter-entry"> <li class="bird-list-entry" bird-id="<%= id %>"> <img src="<%= imagePath %>" class="bird-image" /> <div class="bird-interface"> <div class="bird-info"> <span class="bird-name"><%= name %></span> <span class="bird-latin-name"><%= latinName %></span> <div class="bird-counter-info"> <span class="bird-counter-decrease button"><i class="fa fa-minus button decrease" aria-hidden="true"></i></span> <span class="bird-counter-increase button"><i class="fa fa-plus button increase" aria-hidden="true"></i></span> <span class="bird-current-max"><%= count %></span> </div> </div> </div> </li> </script> <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" },{ "id":5,"name":"Blaumeise", "latinName":"Cyanistes caerruleus", "imagePath":"resources/images/blaumeise.png", "audioPath":"resources/data/audio/blaumeise.ogg" },{ "id":6, "name":"Elster", "latinName":"Pica pica", "imagePath":"resources/images/elster.png", "audioPath":"resources/data/audio/elster.ogg" },{ "id":7, "name":"Grünfink", "latinName":"Chloris chloris", "imagePath":"resources/images/gruenfink.png", "audioPath":"resources/data/audio/gruenfink.ogg" },{ "id":8, "name":"Mehlschwalbe", "latinName":"Delichon urbicum", "imagePath":"resources/images/mehlschwalbe.png", "audioPath":"resources/data/audio/mehlschwalbe.ogg" },{ "id":9, "name":"Mauersegler", "latinName":"Apus apus", "imagePath":"resources/images/mauersegler.png", "audioPath":"resources/data/audio/mauersegler.ogg" },{ "id":10, "name":"Buchfink", "latinName":"Fringilla coelebs", "imagePath":"resources/images/buchfink.png", "audioPath":"resources/data/audio/buchfink.ogg" },{ "id":11, "name":"Ringeltaube", "latinName":"Columba palumbus", "imagePath":"resources/images/ringeltaube.png", "audioPath":"resources/data/audio/ringeltaube.ogg" },{ "id":12, "name":"Feldsperling", "latinName":"Passer montanus", "imagePath":"resources/images/feldsperling.png", "audioPath":"resources/data/audio/feldsperling.ogg" },{ "id":13, "name":"Türkentaube", "latinName":"Streptopelia decaocto", "imagePath":"resources/images/tuerkentaube.png", "audioPath":"resources/data/audio/tuerkentaube.ogg" },{ "id":14, "name":"Rauchschwalbe", "latinName":"Hirundo rustica", "imagePath":"resources/images/rauchschwalbe.png", "audioPath":"resources/data/audio/rauchschwalbe.ogg" },{ "id":15, "name":"Rotkehlchen", "latinName":"Erithacus rubecula", "imagePath":"resources/images/rotkehlchen.png", "audioPath":"resources/data/audio/rotkehlchen.ogg"}] </script> <script src="vendors/underscore/underscore-min.js"></script> <script src="resources/js/BirdingApp.js"></script> <script src="resources/js/BirdingModel.js"></script> <script src="resources/js/BirdingController.js"></script> <script src="resources/js/BirdCounterView.js"></script> <script src="resources/js/BirdListView.js"></script> <script> BirdingApp.init(); </script> </body> </html>
-
-
mmmmm.... Ich verstehe das nicht ganz
-
Was ist dir denn unklar? In Posting #2, der zweite Codeblock, ist angeben, wie Du des Text eines Templates ausliest. Dann brauchst Du ihn zunächst nur mit replace() zu überarbeiten. Dann mit innerHTML in die bird-list einfügen.
-
Das auslesen von #2 ist mir scho klar aber das was du an #31 geschrieben hast, ist mir unklar. Hab nicht vorher gesehen und weiß nicht wo ich das schreiben soll
Code
Alles anzeigenfor(var i =0; i< obj.length; i++){ item = document.createElement("li"); let img = document.createElement("img"), name = document.createElement("name"), latinName = document.createElement("latinName"); name.innerHTML = obj[i].name; name.className = "bird-name"; latinName.innerHTML = obj[i].latinName; latinName.className = "bird-latin-name"; img.src = obj[i].imagePath; img.className = "bird-image"; item.appendChild(img); item.appendChild(name); item.appendChild(latinName); theList.appendChild(item);
-
Ah so. Jetzt hast Du ja das HTML und brauchst die Elemente nicht mehr mit Javascript anzulegen. Jetzt müsste es also etwa so aussehen:
Codevar templ = document.getElementById("bird-list-entry"); for(var i =0; i< obj.length; i++){ var thehtml = templ.replace(("<%= latinName %>", obj[i].latinname) .replace("<%= name %>", obj[i].name) .replace("<%= imagePath %>", obj[i].imagepath); // evtl. weitere Ersetzungen } document.querySelector(".bird-list").innerHTML += thehtml;
-
Da kommt ein Fehler: Uncaught TypeError: templ.replace is not a function
-
-
Es sieht so aus:
-
Vielleicht soll man statt replace was anders benutzen, oder?
-
Nein, replace ist schon richtig. Auf die Namen hatte ich jetzt nicht so geachtet und sie stimmen noch nicht. Außerdem ist bei den ersten replace eine Klammer zu viel. Und das += funktioniert nicht für das innerHTML. Dieses funktioniert bei mir:
Code
Alles anzeigenfunction init() { allBirds.classList.remove("hidden"); var obj = JSON.parse(listOfBirds); console.log(obj); var templ = document.getElementById("bird-list-entry").innerHTML; var thehtml = ""; for (var i = 0; i < obj.length; i++) { thehtml += templ.replace("<%= latinName %>", obj[i].latinName) .replace("<%= name %>", obj[i].name) .replace("<%= imagePath %>", obj[i].imagePath); // evtl. weitere Ersetzungen } document.querySelector(".bird-list").innerHTML = thehtml; }
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!