I have a key value pair data as follows in JSON format. Keys will be dynamic in nature. There is no specific set of keys that will be part of the JSON. I want to show them in a tabular format using Angular mat-table.
var data = {
"cars" : 24,
"fruit" : "apple",
"phone" : "Iphone",
"food" : "Burger"
};
My table output should be:
Expected table output:
Transform your object into array
dataSource = [];
var data = {
cars: 24,
fruit: "apple",
phone: "Iphone",
food: "Burger"
};
for (const key in data) {
dataSource.push({ key, value: data[key] });
}
and to use it in angular material
.ts file
import { Component } from "@angular/core";
export interface RowElement {
key: string;
value: string;
}
@Component({
selector: "table-basic-example",
styleUrls: ["table-basic-example.css"],
templateUrl: "table-basic-example.html"
})
export class TableBasicExample {
data = {
cars: 24,
fruit: "apple",
phone: "Iphone",
food: "Burger"
};
displayedColumns: string[] = ["key", "value"];
dataSource: RowElement[];
constructor() {
for (const key in this.data) {
this.dataSource.push({ key, value: this.data[key] });
}
}
}
.html file
<table mat-table [dataSource]="dataSource">
<!-- Key Column -->
<ng-container matColumnDef="key">
<th mat-header-cell *matHeaderCellDef>Key</th>
<td mat-cell *matCellDef="let element">{{element.key}}</td>
</ng-container>
<!-- Value Column -->
<ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef>Value</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>
{key:key:value:this.data[key]}. you can also use map, not a for dataSource = Object.keys(this.data).map(key=>({key:key,value:this.data[key]}))
Object Property Value Shorthand in JavaScript with ES6for .. in does that without need to call additional method like Object.keys and map function
matColumnDef="key" and ,matColumnDef="value"Is no need to transform the object into an array.
You can easily use keyvalue pipe.
In the ts file:
// properties of the class
displayedColumns: string[] = ['key', 'value'];
dataSource = data;
// use this method if you want to keep the order of the object properties
public orderByKey(a, b) {
return a.key;
}
In the html file:
<table mat-table [dataSource]="dataSource | keyvalue:orderByKey" class="mat-elevation-z8">
<ng-container matColumnDef="key">
<th mat-header-cell *matHeaderCellDef> Key </th>
<td mat-cell *matCellDef="let element"> {{element.key}} </td>
</ng-container>
<ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef> Value </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>
You can check how it works in this stackblitz
