Beiträge von regtan

regtan · 18. Januar 2018

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

regtan · 14. Januar 2018

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

regtan · 14. Januar 2018

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

Code

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

regtan · 14. Januar 2018

Ja genau.

Code

/* eslint-env browser */

var BirdingApp = BirdingApp || (function() {
    "use strict";
  var that = {},
      searchBird,
      allBirds = document.getElementById(".bird-gallery"),
      listOfBirds = document.querySelector("bird-list").innerHTML;

  function init() {
      allBirds.classList.remove("hidden");
      var obj = JSON.parse(listOfBirds);
      console.log(obj);
  }

  that.init = init;
  return that;
}());

Alles anzeigen

regtan · 14. Januar 2018

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

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

regtan · 14. Januar 2018

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.

regtan · 14. Januar 2018

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

Beiträge von regtan

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.