KIBI.ONE PRESENTS…

What is a JSON File & How to Interact With One

In this tutorial you’ll learn how to read JSON files as well as how to interact with the data contained within a JSON file.

Kibi.One is a no-code SaaS incubation program focused on helping non-technical founders build software companies. Visit our homepage to learn more about our program.

Learn How to Use JSON Files (Without Code) in About 10 Minutes

JSON is an acronym which stands for JavaScript Object Notation. It’s a programming language agnostic data structure that programmers often use to transmit data from a server into their applications. JSON objects are lightweight and easy for humans to read and write, and easy for machines to parse and generate.

What does a JSON file look like?

A JSON file looks like this:

{
“name”: “John Doe”,
“age”: 30,
“isStudent”: false,
“grades”: [85, 92, 78],
“address”: {
“street”: “123 Main St”,
“city”: “Exampleville”,
“country”: “USA”
},
“isEmployed”: null
}

In JSON, an object is an unordered collection of key-value pairs. Each key is a string, and each value can be a string, number, boolean, array, another JSON object, or null. The key-value pairs are separated by commas, and the whole object is enclosed in curly braces {}.

An Example of an JSON File

Let’s look at a real world practical example of a JSON file and how we can use one:

One of the most common use cases for JSON files is to transmit data between a webserver and an application through an API. JSON files are sort of an intermediary format which allows disparate systems to communicate with each other.

Application 1, regardless of what programming language it was created in, can call on data from Application 2, coded in another language through the use of this intermediary, universally agreed upon file format which we call JSON.

We need this file format because Developers often need to fetch data that they don’t personally have access to show within their application. For example, if you go to a news site and that site is showing the current weather or air quality or traffic traffic data… it’s probably coming from an API.

So for the purpose of demonstration, and so we’re not speaking in abstractions, let’s use a test website that we use for Kibi.one’s tutorial videos.

Now, as a quick sidenote, if you’re not familiar with who we are, we’re Kibi.one. We run a no-code development agency and no-code course where we teach non-technical, or mildly technical people to build applications, like the one you see in front of you now, by taking a no-code or low code approach. I’ll provide a link to Kibi.one below, if you’re interested in learning how to build and monetize SaaS applications.

Okay, let’s jump back in. Here, notice that I’ve designed a simple little app called “the future of space”. Notice here, I have the title of a space agency and the description of that space agency below. This data is not mine, it just looks like it’s mine, but it’s really coming from an API. I’m simply accessing this data which is currently being housed in a JSON file, I’m parsing out the bits of data I want, and I’m then injecting that data into my application.

Interactive example without code (GET outbound call)

The best way to learn is to do, so let’s get our hands dirty playing with a space mission API. The space API we’re going to be using is an open API that requires no authentication, so you can follow along easily. Over on Kibi.one’s website I put together a page that includes my top 10 favorite APIs that don’t require authentication. Simply copy and paste the link from that page so you can follow along.

You want to grab this space related API endpoint. It’s going to look like a simple URL. You can even post this API endpoint in your browser window to view the JSON file data. After doing that, If you have a jumbled mess of human unreadable data, simply install a JSON formatter in your browser. Again, I’ll link to a free one below and this will make your JSON file much more human readable. So this is what a live JSON file looks like.

This specific API endpoint will list 10 of the agencies within this dataset

https://ll.thespacedevs.com/2.2.0/agencies/?limit=10

This API endpoint is using a search parameter to search for a specific agency known as NASA.

https://ll.thespacedevs.com/2.2.0/agencies/?search=nasa

Here we’re applying another filter to look for space agencies only in the USA

https://ll.thespacedevs.com/2.2.0/agencies/?country_code=USA

Using API endpoints in combination with parameters and filters allows us to zero in on the data within the API that’s relevant to us.

Notice now that I can read the data, but it’s not very end-user friendly. So our job as developers is to take this data and package it to look nice for end users.

Build an App Using JSON

I’m going to build a space app within a no-code tool called bubble. You can sign up for a free account on Bubble and follow along if you don’t already have an account. The app I’m going to build will be really simple. Essentially, I want my users to be able to click a button which will then pull the data from this API into the app.

So let’s build this out. Here, I have a mockup website built where I want to display this data. Imagine, within my app that I wanted to display both the space agency name as well as the description. So I’ve put these two placeholder content fields here, so I can populate them later on.

First, let’s set up the API call. I’m using bubble’s free API connector plugin. Here, I’ll give the API a name. It doesn’t require authentication, so I’ll leave this section as is. In the next tutorial in this series, I’m actually going to show you how to test APIs and play with their endpoints using a program called insomnia, but in this tutorial I want to focus on a practical example of using a JSON file so you understand, at a top level, how JSON files they work within the world of APIs.

So, next, I’ll expand my actual API call and I’ll call it “Space API”. I’ll use “Action” here and then set the data type to JSON. It’s a GET request which uses the following API endpoint.

Now I can initialize the call in order to test the endpoint and ensure it works. Here, I have my returned value which shows me the structure and data types within the API. Notice that if I click on “show raw data” the API’s JSON response becomes visible to me. So here, we can see the entire structure of the JSON.

Everything looks good, so I’ll click on “save”.

Now, back in my front-end, I’ve added a button which I want the user to click on in order to trigger the API workflow. Now of course API triggers can be triggered on page load with no user input required, but let’s set it up like this just for the sake of learning.

I’m going to click on “edit workflow” and then “add an action. I’ll now search for my previously added API call. Here it is, so I’ll trigger that as my first action.

Now that I’ve hit the API endpoint, and have a response waiting for me, I need to access the response and do something with the content within the returned JSON file. So what I’ll do is I’ll create two new states to hold the data that I want to display in my front-end. I’ll call the states “agency name” and “agency description”. They will both be ‘data type: text”. States can also hold JSON data, which will become handy in a moment. I’ll just jump back to my workflows now and then I’ll add the results of step one into these states. To drill into the results, I’ll select “results” then “first item” and then “name”. Essentially, what I’m doing here is I’m using this no code tool to drill into the data contained within the JSON file without having to code. Normally you would have to use dot notation to drill into the data contained within a JSON file, but with no-code tools the entire process is visual.

Notice that the structure of the data was “results”, then I selected the first item, and then I selected “name”. If we go back to our API connector plugin and initialize the call again, and then look at the raw data you’ll see the exact same JSON structure here.

Here we have results, and results are an “array”. So I selected the first item here, which is this object, and then I simply drilled into its name. So this is essentially what it’s returning to me. Or let’s look above. In bubble, you’ll see an even more human readable outline of the structure of the JSON file. Notice here we have “count, next, previous” and then “results”. Under results we have all of these key value pairs we can drill into.

I could easily access any of this data, but for my app all I needed was the “name” and “description” data here, so that’s what I parsed out. So now that you understand how this works, let’s close this down and head back to our workflow.

To drill into the description, which I’ll show in my front-end here, I’ll select “results” first item and then ‘description”.

Now back in the front-end I’ve set the default values of these text input fields as the values of the title and the description being held as a state.

Now, when we run this workflow, the data should come back and populate these fields. Let’s try it out. I’ll refresh the page and then click on this button to run the workflow. As you can see, the API was called and it populated my own site with the results I asked for.

Now of course I could have asked for any data from the response. Within my workflow I could select a specific object with the response by number, or I could filter the response to only include data that meets a certain set of conditions and so on.

If I didn’t want the user to have to click on a button to show the data, I could just add another API call, but now rather than setting the API to the type ‘action”, we’ll instead set it to “data”. After initializing the call, back in our front-end, we can now drill into this new data call by drilling into the space API we just added and then drilling into the data we want. Now notice when I reload the page, the data populates automatically without me having to click on a button.

Conclusion

So in this simple example today we used The JSON file format to allow two totally different systems to communicate and share data between themselves.

So I hope this helps you better understand what a JSON file is and how application developers can use them to transmit data quickly between entirely different systems. Again, over on Kibi one I’ve included a list of my favorite API providers that don’t require authentication. Each JSON file’s data structure and API endpoints are unique. So playing around with these APIs is a great way to gain experience working with nested JSON data.

And remember, if you’re looking to upskill in the area of SaaS development, I encourage you to check us out over on Kibi.one. We have a no-code SaaS development course where we will teach you how to build pretty much whatever you can dream up. A link to Kibi and a coupon code for $100 off can be found below.

Kibi.One is a no-code SaaS incubation program focused on helping non-technical founders build software companies. Visit our homepage to learn more about our program.

Build SaaS Platforms Without Code

Kibi.One is a platform development incubator that helps non-technical founders and entrepreneurs build software companies without having to know how to code. 

We're so sure of our program, that if it's doesn't generate a positive ROI for you, we'll buy your platform from you. Watch the video to the right to learn more.