Read properties of Json object and its values dynamically in Angular/JavaScript

Hello Friends,

Today we are going to see how to read properties of a Json object dynamically and display it using a common component in Angular.

I ran into a situation where I was required to display contents from different sources in a tabular format on the same screen. These sources had different data structures.
To meet this requirement technically, I decided to create a common component in angular which would access the data, derive the headers and show it on the UI. This way, I did not have to create different components for each data structure and also, I can use the same CSS across the board.

I am using a portal called Stackblitz which is an excellent portal for angular/react/javasript hands-on. It sets up everything out of the box and you are basically ready to write first line of code without much of a headache of going through NPM installs for studying. Here is what they are offering at this moment

OK. Lets see the code.

Lets create a common component table-display.component that we will be using to display the data in tabular format.

import { Component, Input, OnInit } from "@angular/core";

@Component({
  selector: "table-display",
  templateUrl: "table-display.component.html"
})
export class TableDisplayComponent implements OnInit {
  headers: any;
  constructor() {}

  ngOnInit() {
    this.headers = Object.keys(this.items[0]);
  }
  @Input()
  items: any[];
}

Here, we have an input property items which is an array of any data structure (assuming Json).

We also have a property called headers in which we will be deriving the headers from the input object.

The entire magic of this post is this line of code

this.headers = Object.keys(this.items[0]);

This is not a feature of angular. This is the feature of Javascript, I am just using it in my angular code.

Here we are taking first element from the Json array and getting all keys from it.

Next we will see the HTML part of it.

The file table-display.component.html shows the data in tabular format.

<div>
  <table class="table">
    <thead class="" style="background-color: lavender;">
      <tr>
        <th *ngFor="let header of headers">{{header}}</th>
      </tr>
    </thead>

    <tbody class="">
      <tr *ngFor="let item of items">
        <td *ngFor="let header of headers">
          {{item[header]}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

In thead, we are iterating over the headers and creating a header row.

In tbody , we are just iterating over items and for each header, we are reading the value using item[header].

Cool. Now our component is ready to go on any page to display the data.

Here is an example.

In my main component, app.component.ts, I have 3 different data sets as below.

private GetCustomerData() {
    return [
      {
        name: "John Smith",
        address: "New York City",
        email: "[e-mail]",
        phone: "123456789"
      },
      {
        name: "Mark John",
        address: "Los Angeles",
        email: "[e-mail]",
        phone: "789456123"
      },
      {
        name: "Amanda Nester",
        address: "Miami",
        email: "[e-mail]",
        phone: "85213456"
      }
    ];
  }

  private GetItemData() {
    return [
      {
        name: "Laptops",
        Model: "Surface",
        Price: "$1500"
      },
      {
        name: "Keyboard",
        Model: "Logitec",
        Price: "$50"
      },
      {
        name: "Phone",
        Model: "Galexy S10",
        Price: "$800"
      }
    ];
  }
  private GetWeatherData() {
    return [
      {
        City: "Philadelphia",
        Weather: "Cold",
        "Chance Of Rain": "10%"
      },
      {
        City: "Dallas",
        Weather: "Warm",
        "Chance Of Rain": "50%"
      },
      {
        City: "san Francisco",
        Weather: "Chilli",
        "Chance Of Rain": "0%"
      }
    ];
  }

I am assigning them to different properties in the component.

  CustomerData: any = this.GetCustomerData();
  ItemsData: any = this.GetItemData();
  WeatherData: any = this.GetWeatherData();

Now I can use the same table-display.component.ts to show the data from all of these data sets by attaching them as input.

<p>
  <table-display [items]="CustomerData"></table-display>

  <br />
  <table-display [items]="ItemsData"></table-display>

  <br />

  <table-display [items]="WeatherData"></table-display>
</p>

Here is the end picture.

Here is the complete code on stackblitz

Hope this helps you.

Thanks for reading.