JSON array aus HTML in JS array.

regtan · 19. Januar 2018

Ja genau das ist es aber wie macht man das?

Sempervivum · 19. Januar 2018

Das Attribut heißt in Javascript className:

Code

img.className = "bird-image";

regtan · 19. Januar 2018

Super! Vielen Dank!

regtan · 19. Januar 2018

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

for(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);

Alles anzeigen

Sempervivum · 19. Januar 2018

Ich empfehle, jeweils ein p-Element für die Namen zu verwenden, dann werden sie automatisch untereinander angeordnet. Wenn Du innerHTML verwendest, um den Text einzutragen, kannst Du auf die Verwendung von textNode verzichten:

Code

name = document.createElement("p");
name.innerHTML = obj[i].name;

Stef · 19. Januar 2018

Sempervivum : benutzt man nicht auf dem Element classList.add('klassennamen') ?

Sempervivum · 19. Januar 2018

Ja, das ist richtig. Aber hier erzeugt er ja das Element gerade neu und es kann noch keine andere Klasse vorhanden sein.

regtan · 19. Januar 2018

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

<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>

Alles anzeigen

Sempervivum · 19. Januar 2018

Was ist denn das für Template? Für ein CMS? Oder ist es selbst gemacht nur für diese Aufgabe?

regtan · 19. Januar 2018

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

<!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>

Alles anzeigen

Sempervivum · 19. Januar 2018

Du kannst das Template wie vorher schon das JSON, mit innerText auslesen und dann die Platzhalter mit replace ersetzen, etwa so:

Code

thehtml = thehtml.replace("<%= latinName %>", obj.latinname)
                 .replace("<%= name %>", obj.name); // evtl. weitere Ersetzungen

regtan · 19. Januar 2018

mmmmm.... Ich verstehe das nicht ganz

Sempervivum · 19. Januar 2018

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.

regtan · 19. Januar 2018

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

for(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);

Alles anzeigen

Sempervivum · 19. Januar 2018

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:

Code

var 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;

regtan · 20. Januar 2018

Da kommt ein Fehler: Uncaught TypeError: templ.replace is not a function

Sempervivum · 20. Januar 2018

Oh, da ist mir ein Fehler unterlaufen. Versuche dies für die erste Zeile:

Code

var templ = document.getElementById("bird-list-entry").innerHTML;

regtan · 20. Januar 2018

Es sieht so aus:

regtan · 20. Januar 2018

Vielleicht soll man statt replace was anders benutzen, oder?

Sempervivum · 20. Januar 2018

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

           function 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;
            }

Alles anzeigen

JSON array aus HTML in JS array.

Jetzt mitmachen!

Teilen

Tags