Accessing JSON Data

Here is an example of a small piece of json data that we can use for our discussions.

• { "firstName": "John", "lastName": "Smith", "isAlive": true, "age": 27, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021-3100" }, "phoneNumbers": [ { "type": "home", "number": "212 555-1234" }, { "type": "office", "number": "646 555-4567" } ], "children": [], "spouse": null }

the Viewer

It's a bit jumbled up so one of the first things we could do is use a "json viewer" to break it down and display the data in a more human friendly way. There are many of these viewers online you can find by doing a search. We're going to use the one at https://jsonviewer.stack.hu/.

Simply copy our json data, open up the "viewer" page and paste our data into the open box. Once done, click the Format option. This will display our json string data in it's original JavaScript object format.

Next, click the tab at the very top that says "Viewer". This gives us a way to open or close portions of the object so that we can focus on the pieces we need to. It also gives us some info in the right pane displaying information about the "key", "value" pairs.

Using the Data

So we can use a "json viewer" to view the data in a more human friendly way, but this just allows us to "view" the data. Let's talk about how to actually utilize the data.

In our last discussion, we talked about using two methods to work with json data:

• JSON.stringify(): converts some JavaScript Object data into JSON string data
• JSON.parse(): converts some JSON string data back into a useable JavaScript object.

So let's suppose we have some JavaScript code, and we have the json data from above assigned to a variable:

• JavaScript
• const userJSON = '{ "firstName": "John", "lastName": "Smith", "isAlive": true, "age": 27, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021-3100" }, "phoneNumbers": [ { "type": "home", "number": "212 555-1234" }, { "type": "office", "number": "646 555-4567" } ], "children": [], "spouse": null }'

Notice how our json data is enclosed in quotes. This is because jason data is "string" data.

So, we have our json string data. The first thing we need to do is to "parse()"" it, which converts it into a useable JavaScript Object.

• JavaScript
• const data = JSON.parse( userJSON );

Now that we have access to the data, AND a way to view the data (in our json viewer), we can start pulling out the pieces of data we want. We just need to access our variable we assigned to the "parsed" data and use "dot" notation to get to the key/value pairs we need. Example: data.key1.key2

If we look at our viewer we can see that this is some data about a person, possibly an end user. Let's say we need his first and last names.

• JavaScript
• const data.firstName would give us : "John"
• const data.lastName would give us : "Smith"

For the address we would use:

• JavaScript
• const data.address.streetAddress would give us : "21 2nd Street"
• const data.address.city would give us : "New York"

Notice how we are using "dot" notation on our variable that represents our "parsed" json string data.