Issue
I have below json and want to render in material table in angular
var res = '[
{
"DynamicName": "xyz",
"DynamicLevel": "xyz",
"DynamicLevel": "xyz",
"DynamicLevel": "xyz",
"dynamic": "xyz"
},
{
"DynamicName": "xyz",
"DynamicLevel": "xyz",
"DynamicLevel": "xyz",
"DynamicLevel": "xyz",
"dynamic": "xyz"
},
{
"DynamicName": "xyz",
"DynamicLevel": "xyz",
"DynamicLevel": "xyz",
"DynamicLevel": "xyz",
"dynamic": "xyz"
}]';
In second response this json will be like below
var res = '[
{
"DynamicCity": "xyz",
"DynamicCountry": "xyz",
"DynamicState": "xyz",
"DynamicRegion": "xyz",
"dynamic": "xyz"
},
{
"DynamicCity": "xyz",
"DynamicCountry": "xyz",
"DynamicState": "xyz",
"DynamicRegion": "xyz",
"dynamic": "xyz"
},
{
"DynamicCity": "xyz",
"DynamicCountry": "xyz",
"DynamicState": "xyz",
"DynamicRegion": "xyz",
"dynamic": "xyz"
}]';
this data need to render in material table I have tried like this
// properties of the class
displayedColumns: string[];//columns should be create dynamically
dataSource = res;
<table mat-table [dataSource]="dataSource | keyvalue" class="mat-elevation-z8">
<ng-container matColumnDef="key">
<th mat-header-cell *matHeaderCellDef> {{element.key}}</th>
<td mat-cell *matCellDef="let element"> {{element.value}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
I need output like below
Here, dynamic column means in each api call we get different data for this column names so it will be changed every api call so I am not able to bind it to material table. Please help me to solve this issue of binding json data to material table. reference URLs:-
- Angular mat-table display dynamic key value pair in each row
- https://www.interfacecreator.com/2018/10/angular-material-table-dynamic.html
Solution
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {
title = 'jsonDemo';
ELEMENT_DATA1 = [
{ 'DynamiCCity': 'Hydrogen' , 'DynamicCountry' : 'Country', 'DynamicState' : 'State' , 'DynamicRegion' :'DynamicRegion' , 'dynamic' :'dynamic' },
{ 'DynamiCCity': 'Hydrogen 1' , 'DynamicCountry' : 'Country 1', 'DynamicState' : 'State 1' , 'DynamicRegion' :'DynamicRegion 1' , 'dynamic':'dynamic 1' },
];
displayedColumns: string[] = [];
dataSource1 = this.ELEMENT_DATA1;
ngOnInit(): void
{
this.displayedColumns = Object.getOwnPropertyNames(this.ELEMENT_DATA1[0]);
}
}
<h2>Demo</h2>
<style>
table {
width: 100%;
}
</style>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let item of displayedColumns" matColumnDef="{{item}}">
<th mat-header-cell *matHeaderCellDef> {{item}} </th>
<td mat-cell *matCellDef="let element"> {{ element[item] }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<router-outlet></router-outlet>
I Hope Above Code is Working Demo of your Issue. It will work as expected.
Answered By - Kaushal Makwana
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.