freeCodeCamp Challenge Guide: Convert JSON Data to HTML

freeCodeCamp Challenge Guide: Convert JSON Data to HTML
0

#1

Once you know how to get data from the JSON call then is time to learn how to iterate through it. We can use the .map() method to loop through our data and modify our HTML elements.

Here is a code that does that:

// calling map on the json variable and using a custom callback function.
json.map(function(val) {

  // Adding each object keys
  var keys = Object.keys(val);
  // Generating new html
  html += "<div class = 'cat'>";
  // Adding the custom html to each key
  keys.map(function(key) {

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

  });

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

});

So:
variable objects stores an array of objects: [object1, object2, object3]
object consists of [key]: [value] pairs
Example of an object:

[{“id”:0,“imageLink”:"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg",“altText”:"A white cat wearing a green helmet shaped melon on it’s head. ",“codeNames”:[“Juggernaut”,“Mrs. Wallace”,“Buttercup”]},{“id”:1,“imageLink”:"https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg",“altText”:"A white cat with blue eys, looking very grumpy. ",“codeNames”:[“Oscar”,“Scrooge”,“Tyrion”]},{“id”:2,“imageLink”:"https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg",“altText”:"A ginger cat with one eye closed and mouth in a grin-like expression. Looking very mischievous. ",“codeNames”:[“The Doctor”,“Loki”,“Joker”]}]

this is the json data that we have now we will convert it using the above written code in this format.

id: 0
imageLink: https://s3.amazonaws.com/freecodecamp/funny-cat.jpg
altText: A white cat wearing a green helmet shaped melon on it’s head.
codeNames: Juggernaut,Mrs. Wallace,Buttercup

id: 1
imageLink: https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg
altText: A white cat with blue eys, looking very grumpy.
codeNames: Oscar,Scrooge,Tyrion

id: 2
imageLink: https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg
altText: A ginger cat with one eye closed and mouth in a grin-like expression. Looking very mischievous.
codeNames: The Doctor,Loki,Joker

How the code works:
json.forEach(function(val) {
var keys = Object.keys(val); // finding the keys and then for each key
html += “

”; //creating divisions for each value there will be a division and there are total of 3 val
keys.forEach(function(key) {
html += “” + key + ": " + val[key] + "
”;//for each key storing key- value pair in var html
});
html += “

”; //ending the created divisions and changing the line

#2

hey bro i’m trying the same but “The message box should have something in it.
” this error is comming


#3

The naming of “val” is truly confusing, I suggest you name it “obj”. Check my code.
“JSON APIs and Ajax” is too compact and confusing. If you would expand it and teach it slowly it will be understandable. It’s the third time I’m doing these 7 exercises over and yet I don’t know how to connect the nodes in my mind to “Building a Random Quote Machine”.


#4

Check https://www.freecodecamp.com/json/cats.json ; Really guys? Each of those objects inside the json does not seem to me like a “val”.
I fact each object contains 3 keys and values paired to them, and those end values should be called “val”.


#5

And increase comment autosave time, it’s really annoying. Doesn’t let me focus on what I wanna say.

saving…
saved

saving…
saved


#6

Needed more explanation but got code here instead


#7

What does this mean : var keys = Object.keys(val); ??


#8

This is confusing, can someone explain whats goin here


#9

Take a look at this


#10

I will. Thank you :slight_smile: