Understanding of JSON data format is a much-needed skill for developers, who work for modern web applications. Traditionally most of the applications share the data in the JSON format. So Understanding of JSON data format is a much-needed skill for Angular and Ionic developers.

In this tutorial, We will see the various JSON data format and how to process those JSON data formats using the Angular(7) and Ionic 4 with code examples.

Format 1:

 

First, we are going to see a list of fruit names.

fruits=["Mango","Banana","Apple","Orange"]

This is called a simple JSON array, which contains only values. You can access this array using *ngFor Directive of Angular.

<ion-item *ngFor="let x of fruits">
<ion-label>{{x}}</ion-label>
</ion-item>

In the above example, the variable x points new value for every iteration. So it will display all fruit names. So if you have an array of any value, then you can use the *ngFor Directive to process all the data.

Format 2:

 

In this section, we will see a simple JSON object format, which contains employee information.

emp={name:"Raja",age:25,gender:"Male",mobile:7788990011}

It is a kind of key-value pair format. Now you can access the data using the dot operator.

<ion-item >
<ion-label>{{emp.name}}</ion-label>
</ion-item>

You can access all the other keys using the dot operator. Don't forget the variable name emp before the dot operator. You can not access the name without using the emp variable. Many people failed to understand this concept due to the lack of less practice. 

Format 3:

 

Next, we are going to see an array of objects. In the first section, we have seen how to access the array values using *ngFor Directive. The same *ngFor directive can be used to access the array of objects. Let's look at the sample data.

clist=[ { alpha2: 'CA',
  alpha3: 'CAN',
  countryCallingCodes: [ '+1' ],
  currencies: [ 'CAD' ],
  ioc: 'CAN',
  languages: [ 'eng', 'fra' ],
  name: 'Canada',
  status: 'assigned' },
 { alpha2: 'UM',
  alpha3: 'UMI',
  countryCallingCodes: [ '+1' ],
  currencies: [ 'USD' ],
  ioc: '',
  languages: [ 'eng' ],
  name: 'United States Minor Outlying Islands',
  status: 'assigned' },
 { alpha2: 'US',
  alpha3: 'USA',
  countryCallingCodes: [ '+1' ],
  currencies: [ 'USD' ],
  ioc: 'USA',
  languages: [ 'eng' ],
  name: 'United States',
  status: 'assigned' } ]

So we access the above country data using the *ngFor directive.

<ion-item *ngFor="let x of clist">
<ion-label>
<h2> {{x.name}} </h2>
<p> {{x.ioc}} </p>
<p> {{x.countryCallingCodes[0]}} </p>
</ion-label>
</ion-item>

Now the variable x points to the object, not a single value, which contains various keys such as
1. name
2. ioc
3.countryCallingCodes
4. currencies

5. etc

So you can access the keys using the dot operator. Each iteration, the variable x will point new object, you can access it like x.name.

In the above data, the key named as countryCallingCodes, which is an array of value. So you access this too using *ngFor directive inside the main loop.
The code for this given below.

<ion-item *ngFor="let x of clist">
<ion-label>
<h2> {{x.name}} </h2>
<p> {{x.ioc}} </p>
<p *ngFor="let y of x.countryCallingCodes">
{{y}}
</p>
</ion-label>
</ion-item>

Format 4:

 

Now we are going to see the same JSON format, which is equivalent to the previous format. But only one difference is here. That is the array of objects is given as a value in the JSON object. Look at the below example data.

clist={
 countries: [
  {
   "code": "+7 840",
   "name": "Abkhazia"
  },
  {
   "code": "+93",
   "name": "Afghanistan"
  },
  {
   "code": "+355",
   "name": "Albania"
  }
]
}

You can access the countries information using the same *ngFor directive.

<ion-item *ngFor="let x of clist.countries">
<ion-label>
<h2> {{x.name}} </h2>
<p> {{x.code}} </p>
</ion-label>
</ion-item>

Look at the above code. The clist.countries points to the array of country object. Not the clist variable alone. Why because the countries array resides inside the clist variable. The variable clist is nothing but an json object(key-value pari format). You can not access it without using the clist variable.