How to grab data from Json data in API

Question

I would like to grab data which has a name tag by calling JSON data by using Ajax. But now a function showCard does not work correctly. How can I get the data which has a name tag? When you click a img which hasfound, I would like to grab data from an API, and show its name by innerHTML. But now nothing happens when you click it. p.s. Its id is added in the function populatePokedex. Hopefully, this question makes sense. Thanks.

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

}


})();

Part of HTML is listed below;

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

what happens if you declare data like this: var data = JSON.parse(this.responseText); ? — blurfus
– blurfus, Commented May 8, 2017 at 5:09
any specifics about what is not working? is showCard method callled? because populatePokedex has async http request inside it. — shakib
– shakib, Commented May 8, 2017 at 5:14
it looks like you can just get the id inside your click event listener. instead of a for loop to assign click events, use an event listener like this document.querySelector('.found').addEventListener('click', showCard) to assign that listener to every <div class="found"></div> — rkstar
– rkstar, Commented May 8, 2017 at 5:18
I tried the code, but the console says there is an error in the code of querySelector... — Tak
– Tak, Commented May 8, 2017 at 5:22

blurfus · Accepted Answer · 2017-05-08 06:31:13Z

You have a few issues in you JS for showCard

I have coded a simple solution. I added some brief explanations in the code (as comments)

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

@Tak I am glad I could help, I added some comments explaining what the issues were

Atanas · Accepted Answer · 2017-05-08 09:03:31Z

2

When I use your url: https://webster.cs.washington.edu/pokedex/pokedex.php?pokemon=mew, I got this data:

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

Assuming you want to display the word mew, data.name or data['name'] works fine. What I'm suspecting is that document.getElementsByClassName("name").innerHTML does not exist or something along that line. Could I see the error message that appears when the function is run or show your HTML portion as well?

edited May 8, 2017 at 9:03

Atanas

3622 silver badges17 bronze badges

answered May 8, 2017 at 5:25

Yu Kai Ku

411 silver badge6 bronze badges

9 Comments

Tak Over a year ago

Thank you for your comment. I added part of my HTML code on the question.

Yu Kai Ku Over a year ago

@Tak Can you try something like this var x = document.getElementsByClassName("name"); x[0].innerHTML = data.name;

Yu Kai Ku Over a year ago

@Tak , alternatively rather than by class name, if the 'name' is not going to be repeated you could change it to id rather than class.

Tak Over a year ago

Thank you. The html is provided, and I cannot modify that... and I'm wondering if 'this.id' in the function showCard is working well. Can I get the id of the element from this.id??

Yu Kai Ku Over a year ago

@Tak could you try changing document.getElementsByClassName("name").innerHTML = data.name; to var x = document.getElementsByClassName("name"); x[0].innerHTML = data.name;

|

Martin · Accepted Answer · 2017-05-08 06:29:12Z

1

Rather than using the below to declare the "click"

$foundPics[i].onclick = showCard;

You should bind an event listener like this

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

Aside from this you xhr.open() method is in the wrong place. The standard way of using it is to put it just before your send() call.

Hope this helps

answered May 8, 2017 at 6:29

Martin

928 bronze badges

Collectives™ on Stack Overflow

How to grab data from Json data in API

3 Answers 3

1 Comment

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related