Accessing JSON Data from HTML - Angular 4

Question

I have this JSON Data which i need to access from my HTML using the MatCellDef of Angular 4. I need to read the FROM, TO, PERCENT and SUBTRACT of the RateBands Array

JSON File

[  
   {  
      "yearlyincentive":{  
         "incentive":{  
            "number":"0",
            "description":"null"
         },
         "year":"2016"
      },
      "computationrates":{  
         "0":{  
            "computation":"0",
            "ratetype":"0",
            "ratebands":[  
               {  
                  "from":"14",
                  "to":"2015",
                  "percent":"30",
                  "subtract":"1"
               }
            ]
         }
      }
   }
]

HTML

 <ng-container matColumnDef="from">
    <mat-header-cell *matHeaderCellDef> From </mat-header-cell>
    <mat-cell *matCellDef="let computationrates">{{computationrates[0].ratebands[0].from}}</mat-cell>
  </ng-container>

You need to import your json inside your ts, assign it into an array variable and then iterate over the array in your template — kboul, Jul 18 '18 at 08:29

kboul · Accepted Answer · 2019-02-14T09:14:54.237

You need to rewrite the template as follows:

In your .ts

import {Component, OnInit} from '@angular/core';
import { MatTableDataSource} from '@angular/material';

const ELEMENT_DATA = [
{
    "yearlyincentive": {
        "incentive": {
            "number": "0",
            "description": "null"
        },
        "year": "2016"
    },
    "computationrates": {
            "0": {
                "computation": "0",
                "ratetype": "0",
                "ratebands": [
                    {
                        "from": "14",
                        "to": "2015",
                        "percent": "30",
                        "subtract": "1" 
                    }
                ]
            }
    }
}
]

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit{
  displayedColumns: string[] = ['from', 'to', 'percent', 'subtract'];
  dataSource = ELEMENT_DATA

 ngOnInit() {
   // this.dataSource = ELEMENT_DATA
  console.log(this.dataSource);

 }

}

In the template:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->
  <ng-container matColumnDef="from">
    <th mat-header-cell *matHeaderCellDef> From. </th>
    <td mat-cell *matCellDef="let element">
      {{element.computationrates[0].ratebands[0].from}} 
    </td>
  </ng-container>

  <ng-container matColumnDef="to">
    <th mat-header-cell *matHeaderCellDef> From. </th>
    <td mat-cell *matCellDef="let element">
      {{element.computationrates[0].ratebands[0].to}} 
    </td>
  </ng-container>

  <ng-container matColumnDef="percent">
    <th mat-header-cell *matHeaderCellDef> From. </th>
    <td mat-cell *matCellDef="let element">
      {{element.computationrates[0].ratebands[0].percent}} 
    </td>
  </ng-container>

  <ng-container matColumnDef="subtract">
    <th mat-header-cell *matHeaderCellDef> From. </th>
    <td mat-cell *matCellDef="let element">
      {{element.computationrates[0].ratebands[0].subtract}} 
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Demo

Accessing JSON Data from HTML - Angular 4

1 Answers1