S1C3.3 : The one about JSON
In my previous post, I have discussed about HttpClient as well as a brief introduction about the most commonly used methods and the different parts of a particular request snippet.
In this post, we will be checking the data that will be returned from the API link and the correct way it can be traversed in order to display the data .
Before proceeding further, let’s understand what is JSON and the ideology behind it in brief.
JSON stands for JavaScript Object Notation and uses the key value pair. Let us take an example of an array and compare with it
array=["Tim" , "Tom" , "Jerry" , "Spike" , "Donald"]In an array, we access elements using the "index" position or "index" value. Say we need to access the first element of the array.We would access it like this array[0]
so for the nth element, we will access like array[n-1]
The array above contains only the first name of every imaginary person. A similar array can be there for last name , then address etc. Now having n arrays for n number of details of a person isn’t quite a feasible approach in terms of both the developer and the product . Here , JSON comes play a key (no pun intended) role.
details={firstName : "Zack" ,lastName : "Agar" , addresss : "HMD"}Anything before colon (:) are the keys
Anything after colon (:) is/are the valuesNow in order to access the values we will simply writedetails.firstName or details['firstName']
Now let us compare the above two variables
array=["Tim" , "Tom" , "Jerry" , "Spike" , "Donald"]
details={firstName : "Zack" ,lastName : "Agar" , addresss : "HMD"}Getting a value from array we use index value
Getting a value from json we use key valuearray[n] : n being the index position
details[key] : key being the propertyarray[0] fetches "Tim"
details[firstName] or details.firstName fetches "Zack"
In real world scenarios, these two properties are used interchangeably or rather in sync with each other.
array=[
{firstName : "Zack" ,lastName : "Agar" , addresss : "HMD"},
{firstName : "Piyush" ,lastName : "Agarwal" , addresss : "HMD2"},
{firstName : "Z" ,lastName : "Dutta" , addresss : "H21"}
];Example of array containing JSON values
Calling a simple value will look like thisarray[0].firstName : Fetches the firstName of the "0"th index positionSyntax: array[n].keyjson={
data:
{
"group1" : array("Tim","Robert"),
"group2" : array("Donald","Bunny")
}
}A JSON containing a key and a value as an arrayjson.data.group2[0] : Accesses the first value of group2 which is under the "data" keySyntax: json.key.subkey[index] or json[key].subkey[index]
A basic understanding of JSON as mentioned earlier will suffice for the rest of your developer life .
Now coming back to accessing and traversing the API since we now understand what is a JSON and how can we go about accessing it
Click here to check the API link
As you can see the API returns a JSON (JavaScript Object Notation) or key-value pair.
But we need to get a clearer vision of the data being returned. In order to do so, copy the data and paste it here and then click on “Viewer” option
Conclusions that can be drawn after viewing
- The parent is a JSON having two keys success and data
- data is a JSON containing the keys summary and regional
- summary is of type JSON and regional is an array
- Every regional element is a JSON in itself having at least 5–6 keys
Now let us code it accordingly in our Typescript (TS) file or Ionic Project.
Storing the summary and regional data in separating variables . Now let us call the method !
Before saving the file, add an alert so that we can know whether or not our code is receiving the data correctly or not.
It shows true, indicating our API has been successfully hit. That’s the end for this post.
In the next post, we will learn how to iterate the array and display it on the home page . If you haven’t checked my previous post, then do so here.
