Lesson 4: JSON
JSON (JavaScript Object Notation) is a set of text formatting rules that stores and transfers data in both a machine- and human-readable way; it is a lightweight data interchange format.
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
Exercise Time!
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 getUser
Line 5: This pulls the value from the input box- in our case, a username
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 response
Lines 15–16: calls assignValues and getFollowers
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 then function)
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 followers
Lines 43–44: forEach is called on f; the forEach loop takes in a function which means that for each f in followers, document.createElement will run
Line 44: The li here is referring to the ul tags in the HTML that have an id of list:
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 ul
Yay, we survived! Now, here’s what the finished page looks like in the browser!
Next up, Scope!
