How to bind JSON array data in table in angular
Hello dear visitor or reader nice to see you here our team alway try to give you valuable content everytime so that you learn more in easy way .i am senior software engineer and i have enough experience on angular and i am sharing my experience in Web platform and many more here.
Introduction to angular:
hello dear learner and visitor thanks for choosing us .Angular is the JavaScript open source SPA(Single Page Application) framework .we can create our application using its MVVC architecture with advanced feature ,easy way of implementation and configuration. In angular to make any web application oor hybrid is very easy because the structure of of project is so easy to understand for any web developer.we can also make hybrid and native application with the help of other framework with angular.
Data binding in angular
As we have discussed before all data binding in angular for more details you can visit data binding article.
So as per the data binding feature in angular we have several way to bind data so today i am going to give you some example how you can bind data in tables .In real world problems or big project you may face to bind large JSON data to the table that may in difficult format to iterate over the table but you can understand the flow of the JSON and how they can be linked or iterate over a table you can work any size of JSON data.
What is JSON data ?
JSON data are nothing but some data in key and value pair format and we can play with this JSON data as per requirement and this is very easy in angular.For Inbuild directives this became very simple to iterate on a JSON data and we can bind data to the table or other HTML components with the help of different data binding techniques.
Where to get JSON data
Sometime we do some api request in our application to get our required information from the external source. with the help of api call we can fetch the data or information in many format from them one is JSON format which simply looks like this as given below .
JSON example :-
{
"users": [
{
"id": 0,
"name": "Robert hook",
"work": "Unilogic",
"email": "rpbert@gmil.com",
"dob": "1978",
"address": "salepur jjfd",
"city": "xyz",
"optedin": true
},
{
"id": 1,
"name": "denniel",
"work": "Connic",
"email": "example.com",
"dob": "1987",
"address": "bhubaneswar sd...",
"city": "Toronto",
"optedin": false
}
],
"images": [
"img0.png",
"img1.png",
"img2.png"
],
"coordinates": {
"x": 35.1222,
"y": -21.4219
},
"price": "$50,395"
}
Look here we have dummy JSON inside which we can seeing some data of users information snd some others .
How bind JSON data with table
Now we knew the real meaning of JSON data and where we can get them now just coming to topic we are ready to bind the data with table.First of all we are going to create one table with some dummy user JSON data .
EXAMPLE 1:-
In this example we will create one USER JSON data first like this this only for dummy purpose in real world you can get these data from API Call as i have discussed above .
{
"users": [
{
"id": 0,
"name": "Robert hook",
"work": "Unilogic",
"email": "rpbert@gmil.com",
"dob": "1978",
"address": "salepur jjfd",
"city": "xyz",
"optedin": true
},
{
"id": 1,
"name": "denniel",
"work": "Connic",
"email": "example.com",
"dob": "1987",
"address": "bhubaneswar sd...",
"city": "Toronto",
"optedin": false
},
{
"id": 1,
"name": "Nanoi",
"work": "plugino",
"email": "plugino@gff.com",
"dob": "1987",
"address": "palmgiril sd...",
"city": "Toronto",
"optedin": false
}
],
}
Ok so now we have dummy USER data now we can create a HTML table structure without any hardcoded data in the rows.
Suppose we have a component app.component.html which is the roor component in the angular application.Initially our table will be something like this before data binding .
<table>
<tr>
<th>NAME</th>
<th>mail</th>
<th>address</th>
<th>city</th>
</tr>
<tr>
<td></td>
<td>/td>
<td></td>
<td></td>
</tr>
</table>
And inside the app.component.ts file we will first save the JSON data inside a ARRAY type of variable
export class appcomponent implements OnInit{
dataArray :any =[];
JSONdata= {
"users": [
{
"id": 0,
"name": "Robert hook",
"work": "Unilogic",
"email": "rpbert@gmil.com",
"dob": "1978",
"address": "salepur jjfd",
"city": "xyz",
"optedin": true
},
{
"id": 1,
"name": "denniel",
"work": "Connic",
"email": "example.com",
"dob": "1987",
"address": "bhubaneswar sd...",
"city": "Toronto",
"optedin": false
},
{
"id": 1,
"name": "Nanoi",
"work": "plugino",
"email": "plugino@gff.com",
"dob": "1987",
"address": "palmgiril sd...",
"city": "Toronto",
"optedin": false
}
],
}
ngOnInit(){
this.DataArray = this.JSONdata;
}
}
Here inside class we have added two variable one is of ARRAY type and another is a variable holding JSON data. And inside ngOnit we have assigned the JSON data to the Array type of variable.then with this variable (DataArray) we can bind data in our table.
Go inside app.component.html and do something like this
<table>
<tr>
<th>NAME</th>
<th>mail</th>
<th>address</th>
<th>city</th>
</tr>
<tr *ngFor="let item of DataArray">
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.address}}</td>
<td>{{item.city}}</td>
</tr>
</table>
Here we are keeping the headers as hardcoded and inside tr tag we are iterating the DataArray variable with the help og *ngFor directive .and inside tr tag we have td tag we are doing our required data binding with the hrlp of string interpolation .And remember one this here the value we are binding inside td tag i.e {{item.name}} should match with the keys of JSON data .
EXAMPLE 2
String interpolation is not the only way with which we can render data to the table we can also dind the data in this way using innerText directive .
<table>
<tr>
<th>NAME</th>
<th>mail</th>
<th>address</th>
<th>city</th>
</tr>
<tr *ngFor="let item of DataArray">
<td [innerText]="item,name"></td>
<td [innerText]="item.email"></td>
<td [innettext]="item.address"></td>
<td [innerText]="item.city"></td>
</tr>
</table>
Here in this example we are just changing the string interpolation to innerText and all are remain ,
NOTE:- This is just a dummy JSON example in the big application you may face the task to bind big JSON with lengthy structure so do accordingly .
Tags:
Angular