![](/img/trans.png)
[英]Using React, how to grab data from JSON in API - object of arrays
[英]How to grab data from Json data in API
我想通过使用Ajax调用JSON数据来获取具有name
标签的数据。 但是现在功能showCard
无法正常工作。 如何获得带有name
标签的数据? 当您单击found
的img
,我想从API中获取数据,并通过innerHTML显示其名称。 但是现在单击时什么也没有发生。 ps其ID被添加到函数populatePokedex
。 希望这个问题是有道理的。 谢谢。
(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>
当我使用您的网址时: 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"}]}
假设您要显示单词mew,则data.name或data ['name']可以正常工作。 我怀疑的是document.getElementsByClassName("name").innerHTML
不存在或类似的东西。 运行函数或显示HTML部分时,我还能看到错误消息吗?
JS for 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>
而不是使用下面的方法来声明“点击”
$foundPics[i].onclick = showCard;
你应该像这样绑定一个事件监听器
$foundPics[i].addEventListener('click', showCard());
除此之外,您的xhr.open()方法在错误的位置。 使用它的标准方法是将其放在send()调用之前。
希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.