Suggestion For Fun Bonus Challenge With JSON/Ajax

JavaScript
1

I was working on my first data visualization project when I noticed that I was having a heck of a time extracting any data out of the callback function invoked after requesting JSON data. So I went back to this exercise to figure out what’s going on:

JSON APIs and Ajax: Access the JSON Data from an API

I then figured it must be necessary to utilize the JSON data WITHIN the callback function. I wondered why this was. json is clearly a global variable as it is not declared, yet no matter what I tried, I couldn’t console.log the data outside the callback function even though I could do it from within the call-back.

Then it hit me. I’m dealing with an async situation here, so probably the callback function is being called AFTER the console.log command outside the call-back.

Okay, so now I’ve learnt that I must render all my HTML elements within the callback function, but I still wanted to figure out a way to get data out of that function. There’s no reason for this other than it’s a fun challenge. Then the answer came to me. Set the console.log to fire after a timeout period (long enough for the async function to finish). And voila. It works!

So there we go. Fun bonus exercise: find a way to console.log the JSON data outside the call-back function.

I think this would be a good challenge to include in the curriculum because it teaches us about 1) the concept of async, and 2) reinforces WHY we should work with JSON data INSIDE the call back function - because this was not explicitly explained in the lesson.

Anyway, it’s just a suggestion. I thought this was a fun exercise.

Edit: Okay, so I’ve found a better way to access data outside the call-back function. Create an outside function. Inside the call-back function, call the outside function and pass in the JSON data. This way, there isn’t a big time delay.

<script>
  document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('getMessage').onclick=function(){
      req=new XMLHttpRequest();
      req.open("GET",'/json/cats.json',true);
      req.send();
      req.onload=function(){
        json=JSON.parse(req.responseText);
        document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
        // Add your code below this line
        //console.log(json[2].codeNames[1]);
        tester(json);
        // Add your code above this line
      };
    };
  });
  //console.log(json[2].codeNames[1]);
function tester (data){
         console.log(data[2].codeNames[1];
}

  setTimeout(function(){console.log(json[2].codeNames[1]);}, 3000);
</script>
<style>
  body {
    text-align: center;
    font-family: "Helvetica", sans-serif;
  }
  h1 {
    font-size: 2em;
    font-weight: bold;
  }
  .box {
    border-radius: 5px;
    background-color: #eee;
    padding: 20px 5px;
  }
  button {
    color: white;
    background-color: #4791d0;
    border-radius: 5px;
    border: 1px solid #4791d0;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    background-color: #0F5897;
    border: 1px solid #0F5897;
  }
</style>
<h1>Cat Photo Finder</h1> 
<p class="message box">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>
1 Like