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.Ā