Lesson 4: JSON
The main things to know about JSON are:
- It is made up of keys and values
- A key is commonly a string enclosed in quotation marks
"”, but it doesn’t have to be
- A value can be a string, number, Boolean expression, an array, or an object
Together, keys and values make a key value pair, which has a very specific syntax:
Key: Value. If there is more than one, they are separated with commas (see example below). It is recommend to keep the syntax consistent throughout the JSON.
In the below example, you will see that there are quotes around the highlighted key, as well its corresponding value.
NB: JSON cannot store functions, but it can store primitives.
The way you can access values in JSON is by calling one of the keys. For example, if the JSON were saved in a variable called
json, here’s one way you could call it and what that call would yield:
You can also convert the whole JSON object into a string, and do the reverse (convert a string into JSON) with two functions:
- JSON.stringify()- turns JSON into a string
- JSON.parse()- turns string into JSON
Here are the details of the task:
…and here’s the part where I show the finished code (in two parts) and explain what’s going on:
Lines 1–2: These are global variables that will be populated with the API values
Line 4: The event listener here listens for a click on the button (which is in the HTML); when it hears that click, it will call
Line 5: This pulls the value from the input box- in our case, a
Line 8: The
getUser function is using the
fetch call I mention in Lesson 3: AJAX. It takes in a
name and tacks it onto the end of the URL on Line 9
Line 10: This
then function converts the response to JSON (and that JSON Object is then used as the parameter on Line 13)
Line 14: Here, the value of
j is assigned to the global variable
Lines 15–16: calls
Line 20: This function is a bunch of selectors! Yay, something we’ve seen before!
Line 21: This gets the loader and makes it go away (with the
display:none) once the promise has been resolved (a.k.a. once it goes through the
Lines 23–28 all parse the response and pull out what they need from the JSON.
Just a bit on lines 23 and 28!
Line 23: Here, we want to set the source to the URL of the avatar (
response.avatar_url) in order to get the URL of the picture
Line 28: This is the same as lines 24–27, except that we added a string (you’ll see “Followers:” on the page example at the end of this post).
Line 31: The
getFollowers function is using another
fetch call (Line 32)!
Line 33: First
then function and, you guessed it, it’s parsing out the JSON
Line 37: The value of
f is assigned to the global variable
forEach is called on
forEach loop takes in a function which means that for each
document.createElement will run
Line 44: The
li here is referring to the
ul tags in the HTML that have an id of
Line 45: The
li child has two parts: the
href, which has the url for the profile of each follower, and the
img src, which has the picture (which, when you hover over it, shows the username)
Line 48: This will get the list and append the
li child to the
Yay, we survived! Now, here’s what the finished page looks like in the browser!
Next up, Scope!