如何搶在API

從JSON數據的數據，我想抓住它通過使用Ajax調用JSON數據具有name標籤數據。但是現在函數showCard無法正常工作。我怎樣才能得到有name標籤的數據？當您單擊一個有found的img時，我想從API獲取數據，並通過innerHTML顯示其名稱。但是現在沒有任何反應，當你點擊它。 p.s.它的ID被添加在功能populatePokedex中。希望這個問題很有意義。謝謝。如何搶在API

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

} 


})();

下面列出了HTML的一部分;

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

來源

2017-05-08 Tak

如果聲明'data'這樣會發生什麼：'VAR數據= JSON.parse（this.responseText）;'？ – ochi

我試過了，但它沒有工作... – Tak

關於什麼不工作的任何細節？是'showCard'方法調用？因爲'populatePokedex'裏面有異步http請求。 – shakib

你有幾個問題，你對JS showCard

我已經編寫了一個簡單的解決方案。我加在代碼中的一些簡要說明（以註釋形式）

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

來源

2017-05-08 06:17:45 ochi

這有效！非常感謝你的幫助！ – Tak

@Tak我很高興我能幫忙，我添加了一些意見，解釋問題是什麼 – ochi

非常感謝。這對我學習真的很有幫助！ – Tak

當我使用你的網址：https://webster.cs.washington.edu/pokedex/pokedex.php?pokemon=mew，我得到了這樣的數據：

{"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"}]}

假設你要顯示的文字貓叫聲，data.name或數據[ '名']工作正常。什麼我懷疑是document.getElementsByClassName("name").innerHTML 不存在，或者沿着這條線的東西。我可以看到函數運行時出現的錯誤消息，還是顯示HTML部分？

來源

2017-05-08 05:25:11

感謝您的評論。我在問題中添加了部分HTML代碼。 – Tak

@Tak 你可以嘗試這樣的事情變種X = document.getElementsByClassName（「名稱」）; x [0] .innerHTML = data.name; –

@Tak，或者不要按類名稱，如果'name'不會被重複，您可以將其更改爲id而不是class。 –

而不是使用下面的聲明「單擊」

$foundPics[i].onclick = showCard;

您應該綁定事件偵聽器像這

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

除此之外，你xhr .open（）方法在錯誤的地方。使用它的標準方式是在send（）調用之前放置它。

希望這有助於

來源

2017-05-08 06:29:12 Martin

回答

相關問題