So greifen Sie Daten aus Json-Daten in API

Question

Ich möchte Daten mit einem name-Tag greifen, indem Sie JSON-Daten mithilfe von Ajax aufrufen. Aber jetzt funktioniert eine Funktion showCard nicht richtig. Wie kann ich die Daten erhalten, die ein name Tag haben? Wenn Sie auf ein img klicken, das hat, möchte ich Daten von einer API abrufen und seinen Namen von InnerHTML anzeigen. Aber jetzt passiert nichts, wenn Sie darauf klicken. p.s. Seine ID wird in der Funktion populatePokedex hinzugefügt. Hoffentlich macht diese Frage Sinn. Vielen Dank.

(function() { 
'use strict'; 

window.onload = function(){ 
    populatePokedex(); // <- This works correctly 

    var $foundPics = document.getElementsByClassName("found"); 
    for(var i = 0; i < $foundPics.length; i++){ 
     $foundPics[i].onclick = showCard; 
    } 
}; 



// populate Pokedex 
function populatePokedex() { 

    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", "https://webster.cs.washington.edu/pokedex/pokedex.php?pokedex=all"); 
    xhr.onload = function(){ 
     if (this.status == 200) { 
      var picArr = this.responseText.split("\n"); 
      for(var i=0; i < picArr.length; i++){ 
       var eachName = picArr[i].split(":"); 
       var spriteurl = "/Pokedex/sprites/" + eachName[1]; 
       var imgClass = 'sprite'; 
       if(eachName[1]==='bulbasaur.png' || eachName[1]==='charmander.png' || eachName[1]==='squirtle.png'){ 
        imgClass += ' found'; 
       } else { 
        imgClass += ' unfound'; 
       } 
       document.getElementById("pokedex-view").innerHTML += "<img src=\"" + spriteurl + "\" id=\"" + eachName[0] + "\" class=\"" + imgClass + "\">"; 
      } 
     } else { 
      document.getElementById("pokedex-view").innerHTML = "ERROR: Status: " + this.status + ", " + this.statusText; 
     } 
    }; 
    xhr.onerror = function(){ 
     document.getElementById("pokedex-view").innerHTML = "ERROR"; 
    }; 
    xhr.send(); 
} 


// if the pokemon is found, it shows the data of the pokemon 
function showCard() { 
    var xhr = new XMLHttpRequest(); 
    var url = "https://webster.cs.washington.edu/pokedex/pokedex.php?pokemon=" + this.id; 
    xhr("GET", url); 
    xhr.onload = function(){ 
     var data = JSON.parse(this.responseText); 
     var pokeName = document.getElementsByClassName("name"); 
     for(var i=0; i < pokeName.length; i++){ 
      pokeName[i].innerHTML = data.name; 
     } 
    }; 
    xhr.onerror = function(){ 
     alert("ERROR"); 
    }; 
    xhr.send(); 

} 


})(); 

Ein Teil von HTML ist unten aufgeführt;

<div id="my-card"> 

    <div class="card-container"> 
     <div class="card"> 
     <h2 class="name">Pokemon Name</h2> 
     <img src="icons/fighting.jpg" alt="weakness" class="weakness" /> 
     </div> 
    </div> 
    </div> 

    <!-- You populate this using JavaScript --> 
    <div id="pokedex-view"></div> 

Answer 1

Sie haben ein paar Probleme in Ihnen JS für showCard

ich eine einfache Lösung codiert haben. Ich habe einige kurze Erklärungen im Code (wie Kommentare)

(function() { 
 
    'use strict'; 
 

 
    window.onload = function() { 
 
    populatePokedex(); // <- This works correctly 
 
    
 
    // adding event listeners to dynamically added nodes. 
 
    document.querySelector('body').addEventListener('click', function(event) { 
 
     // need to target only elements with class found (but unfound would also match the indexOf below, so we changed the name of the matching class slightly) 
 
     if (event.target.className.toLowerCase().indexOf('founded') != -1) { 
 
     showCard(); 
 
     } 
 
    }); 
 
    }; 
 

 

 
    // populate Pokedex 
 
    function populatePokedex() { 
 

 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open("GET", "https://webster.cs.washington.edu/pokedex/pokedex.php?pokedex=all"); 
 
    xhr.onload = function() { 
 
     if (this.status == 200) { 
 
     var picArr = this.responseText.split("\n"); 
 
     for (var i = 0; i < picArr.length; i++) { 
 
      var eachName = picArr[i].split(":"); 
 
      var spriteurl = "https://webster.cs.washington.edu/pokedex/sprites/" + eachName[1]; 
 
      var imgClass = 'sprite'; 
 
      if (eachName[1] === 'bulbasaur.png' || eachName[1] === 'charmander.png' || eachName[1] === 'squirtle.png') { 
 
      imgClass += ' founded'; 
 
      } else { 
 
      imgClass += ' unfound'; 
 
      } 
 
      document.getElementById("pokedex-view").innerHTML += "<img src=\"" + spriteurl + "\" id=\"" + eachName[0] + "\" class=\"" + imgClass + "\">"; 
 
     } 
 
     } else { 
 
     document.getElementById("pokedex-view").innerHTML = "ERROR: Status: " + this.status + ", " + this.statusText; 
 
     } 
 
    }; 
 
    xhr.onerror = function() { 
 
     document.getElementById("pokedex-view").innerHTML = "ERROR"; 
 
    }; 
 
    xhr.send(); 
 
    } 
 

 
    // if the pokemon is found, it shows the data of the pokemon 
 
    function showCard() { 
 
    
 
    var xhr = new XMLHttpRequest(); 
 
    // since you are in a click event, use the target's id instead 
 
    var url = "https://webster.cs.washington.edu/pokedex/pokedex.php?pokemon=" + event.target.id; 
 
    // there was an error here 
 
    xhr.open("GET", url); 
 
    xhr.onload = function() { 
 
     // parse the response text into JSON 
 
     var data = JSON.parse(this.responseText); 
 
     // update the element with this id with a new value from the response data 
 
     document.getElementById("pokemon-name").innerHTML = data.name; 
 
    }; 
 
    xhr.onerror = function() { 
 
     alert("ERROR"); 
 
    }; 
 
    xhr.send(); 
 

 
    } 
 

 

 

 

 
})();

.founded:hover { 
 
    cursor: pointer; 
 
} 
 

 
.founded { 
 
    border: 1px solid green; 
 
}

<div id="my-card"> 
 

 
    <div class="card-container"> 
 
    <div class="card"> 
 
     <h2 id="pokemon-name" class="name">Pokemon Name</h2> 
 
     <img src="https://webster.cs.washington.edu/pokedex/icons/fighting.jpg" alt="weakness" class="weakness" /> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- You populate this using JavaScript --> 
 
<div id="pokedex-view"></div>

Answer 2

Wenn ich Ihre URL: https://webster.cs.washington.edu/pokedex/pokedex.php?pokemon=mew, ich diese Daten einsehen:

{"name":"Mew","hp":160,"info":{"id":"151","type":"psychic","weakness":"dark","description":"Its DNA is said to contain the genetic codes of all Pokemon."},"images":{"photo":"images\/mew.jpg","typeIcon":"icons\/psychic.jpg","weaknessIcon":"icons\/dark.jpg"},"moves":[{"name":"Amnesia","type":"psychic"},{"name":"Psychic","dp":90,"type":"psychic"}]} 

Sie das Wort mew angezeigt werden soll Unter der Annahme, arbeitet data.name oder data [ 'name'] in Ordnung. Was ich vermute, ist, dass document.getElementsByClassName("name").innerHTML nicht existiert oder etwas in dieser Zeile. Kann ich die Fehlermeldung sehen, die erscheint, wenn die Funktion ausgeführt wird, oder auch Ihren HTML-Teil anzeigen?

Answer 3

Anstatt mit der unter dem „Klick“

$foundPics[i].onclick = showCard; 

Sie binden Zuhörer ein Ereignis sollte zu erklären, wie diese

$foundPics[i].addEventListener('click', showCard()); 

Abgesehen von diesem Sie xhr .open() -Methode ist an der falschen Stelle. Die übliche Art, es zu verwenden, besteht darin, es direkt vor dem Aufruf von send() zu setzen.

hoffe, das hilft