JSON APIs and Ajax: Convert JSON Data to HTML

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

Your code so far

      req=new XMLHttpRequest();
        var html = "";
        // Add your code below this line
        // Add your code above this line
  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;
<h1>Cat Photo Finder</h1> 
<p class="message box">
  The message will go here
  <button id="getMessage">
    Get Message

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:

1 Like

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

    "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