At some point in our lives or careers in the development field, we all wondered: how can computers communicate with each other so easily and quickly? That is unbelievable.
Sometimes, you fill your username in on an application, and tons of data are there in a matter of seconds or less. How can this be?
JSON is a text-only format that follows the JSON syntax rules to send different data types.
This is possible because JSON is a lightweight format to communicate data between computers. It is easy to understand for all kinds of developers, and you can write or read it with code written in any programming language.
These rules are:
While working with the stringify method, we need to have in mind a couple of things to avoid errors, because if our JS object has undefined values, it will replace them with null, and if we have some unsupported data types, it can also censor them. To avoid this problem, you can also use the replace option after the value in the function, but for now, we will not dive deep into those situations.
The parse method will do the opposite of stringify. We will give the JSON object to this function, and it will convert it to a JS literal object.
To work with this method, we will need to be aware of the JSON object we are reading because if we Stringified it with the replacer option, we will need to implement the reviver option, but, again, these cases are very uncommon.
Below, you can see examples of each and decide which is the best for your use case.
To access an object value using square brackets, we will make an object [‘key’] and it will return the value for the key we wanted.
We can use dot notation to access the value for a specific key. The correct way to use it will be “object.key” and it will return the desired value.
Object destructuring can be a bit confusing at the beginning, but is just a way to assign values to variables or constants all at the once, like in the example listed below:
Now that you understand the methods to do it, you can see how to loop through the array of JSON objects.
JSON is already a standard. It became popular because JS is the principal developer's tool for the front-end. Having one standardized way to communicate data from another language as a JS object is necessary and makes life easier. Let's take, for example, a backend that retrieves an API, which has to be formatted to get consumed in the front-end. If the backend languages don't have the same syntax to write objects as JS, that will become a headache, and the front-end structure should change from app to app. But with JSON, we know that we can access the data retrieved very quickly, just calling the JSON method parse. Then we can use it as a regular JS object.
JSON files are files with the .json extension and are great for storing data in JSON format to be opened by any programming language and only need to be parsed to make it a JS object. These files are very useful because the code becomes lighter but still human-readable and editable with any code editor.
We may not see this kind of file too often since most of the connections between computers are via an internet connection, so we don't need to save the data in files on hard drives. But, pages such as Google+ allow users to download data in .json files they can use later.
To load JSON files, we need to choose between require and fetch, and decide which is better for our case. If the file is locally saved in our computer, we should use require, thinking about the JSON file as another component of our project. On the other hand, if we need to read a file that is somewhere on the internet, we should use fetch, handling it as any other link.
If you request the file, as you will usually require a module from another JS file, you will be allowed to use all its content as regular JSON objects, parse it, and start working with it.
You can also use fetch, similar to making an HTTPS call, but that will make the code asynchronous, which will be useless if you have the file stored locally. However, this comes in very handy if you are in a web-based environment where you can have some delay while requesting the data.