JSON APIs and Ajax: Convert JSON Data to HTML

JavaScript
1

Tell us what’s happening:
someone please me understanding this challenge.
i just can’t get it.
thank you

Your code so far


<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);
        var html = "";
        // Add your code below this line
        
        
        
        // Add your code above this line
        document.getElementsByClassName('message')[0].innerHTML=html;
      };
    };
  });
</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>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0.

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/json-apis-and-ajax/convert-json-data-to-html

1 Like
2

Looking at the example:

  • json.forEach(function(val) {

Here the forEach loop is called against the json object: it means that for each element of json it will execute the following operations.

  • var keys = Object.keys(val);

Here it extract the keys from the object val ( each element of json will be passed in with that variable)

  • html += "<div class = 'cat'>";

html is a string: the addition assignment operator (MDN - addition assignment operator ) will append the provided string to html actual value ( it was empty, now html = <div class = 'cat'>)

  • keys.forEach(function(key) {

Here it makes again a loop, this time against the keys of the object.
If the first json was something like

{
    "name":"John",
    "age":30,
    "cars": [
        { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
        { "name":"BMW", "models":[ "320", "X3", "X5" ] },
        { "name":"Fiat", "models":[ "500", "Panda" ] }
    ]
 }

now your loop elements would be name, age, cars

  • html += "<strong>" + key + "</strong>: " + val[key] + "<br>";

Again you append to the html variable some strings: it was
html = <div class = 'cat'>
at the first round of the loop will become html = <div class = 'cat'><strong>" + name + "</strong>: " + Jhon + "<br>

key is being replaced by the first entry of keys ( name), val[key] is the same as json[0].name ( json[0] is val, name is key), which is Jhon

  • html += "</div><br>";

When the loop of the keys ended it append the final string, needed to close the div tag.

That’s all!

1 Like