- Read Tutorial
- Watch Guide Video
If you’ve worked with APIs or front end applications, or if you want to, you have most likely heard of the JSON data format. JSON is short for JavaScript Object Notation and at a high level, it’s simply a way to format data into attribute-value pairs.
If that still doesn’t make sense here is a basic example of JSON from one of the devCamp API courses:
As you can see, the data is structured so that each element is separated by a comma and inside each element is an attribute, such as “id” or “title” followed by a value such as 1 for the “id” or “Test Blog Post” for the “title”.
If you’ve never worked with APIs, looking at this type of code may be intimidating at first. I know it was for me the first time I saw JSON, however, it really helped me to first understand the purpose of JSON. JSON was created to be a universal data format that could be used across all languages and frameworks, which means that it actually has to be quite simple since it has to work exactly the same way for a Ruby on Rails web application as an iOS mobile app.
With that in mind let’s discuss how we can practically implement JSON parsing in a real-world application. Typically I try to keep these videos language-agnostic since I want everyone to get something from them, with that being said the syntax for parsing JSON is going to be slightly different in each language, however, the high-level processes will be the same and I’ve outlined them in the following steps.
This is what the API that we’ll be working with looks like if you were to go to the URL in the browser
First we need to call the API or JSON data. In this example I’m using the Ruby language and the httparty gem to contact an outside API that I’ve mocked.
When I run this program it contacts the outside API and prints out all of the JSON data to the terminal, as shown here.
This is a mess, if you wouldn’t know where to start with implementing the code for JSON parsing don’t worry, there is actually a really nice shortcut for finding out how to pull out data. But first, let’s talk about how to pull data from a nested data structure like JSON. Each language is a little different, however, it usually looks something like this:
This is called bracket syntax and it lets you access nested levels of data within JSON. Here is a diagram of how you can visualize the nested behavior of JSON.
Here we have some User data and each user is stored inside Level 1, from there we have some high-level data on the user such as a name, email, and hobbies in Level 2. And inside our “Hobbies” attribute is stored another level, Level 3, that includes another set of data. Usually, Level 1 is an integer, so if we wanted to grab the data from the “Music” attribute our JSON parsing code would look something like this.
Here the first level is accessed by passing an integer, such as [0] to grab a specific user, then to select an attribute from Level 2 we’re appending [“Hobbies”], and lastly, we’ll chain on [“Music”] in order to be able to get to the 3rd level of the JSON data which will return all of the user’s music data.
So this is great when we have a nice printed diagram of the data, what happens in the real world when we don’t have that? Well let’s go look at the data in the browser:
Notice what happens when I hover over one of the attributes in Chrome? I have the JSONView Chrome Extension installed and it actually shows me the full JSON data lookup for whatever attribute I hover over. There are a number of tools that will help you quickly see the JSON attribute nesting, JSONView is one of my favorites and you can install it for free. Let’s test this out by updating our code with a real call using the [“text”] attribute that we saw in the browser:
Since I want the first data element I’m passing the [0] value to get the first JSON record returned, and from there I’m accessing the “text” attribute in Level 2. Running this will show that it worked and it prints out the Tweet:
See, that wasn’t that scary at all! JSON is simply a way of universally structuring data so that it can be used by any language or framework, once you have worked with it a few times you’ll see that it’s a great format to work with to build and communicate with applications.
I hope that you now have a better understanding of how JSON parsing works and that you can use it in an application.