JSON array aus HTML in JS array.

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


  • 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
    1. name = document.createElement("p");
    2. name.innerHTML = obj[i].name;
  • Ich hab erst jetzt gemerkt das auf HTML ein template für die Angabe schon fertig steht :(
    Weiß jemand wie genau benutzt man des?

  • 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. :)


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

    Code
    1. thehtml = thehtml.replace("<%= latinName %>", obj.latinname)
    2. .replace("<%= name %>", obj.name); // evtl. weitere Ersetzungen
  • 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 :(

  • 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
    1. var templ = document.getElementById("bird-list-entry");
    2. for(var i =0; i< obj.length; i++){
    3. var thehtml = templ.replace(("<%= latinName %>", obj[i].latinname)
    4. .replace("<%= name %>", obj[i].name)
    5. .replace("<%= imagePath %>", obj[i].imagepath); // evtl. weitere Ersetzungen
    6. }
    7. document.querySelector(".bird-list").innerHTML += thehtml;
  • 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:

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Sempervivum ()