Is there a way to access the value or key of a JSON property in an Angular template for rendering purposes?

Question

Is there a way to access the value or key of a JSON property in an Angular template for rendering purposes?

Having trouble displaying the JSON values of certain properties on screen.

Utilizing Angular Material table to showcase my JSON response.

The code snippet below is responsible for rendering the JSON data:

 <mat-card-content class="dashboard-card-content">
    <div></div>
    <div *ngIf="card.title===title1" class="custom-table-container mat-elevation-z8">
      <table mat-table [dataSource]="dataSourceGeneralShift" class="">

        <!-- Name Column -->
        <ng-container matColumnDef="Name">
          <th mat-header-cell *matHeaderCellDef> Name </th>
          <td mat-cell *matCellDef="let col" class="align-left"> {{col.Name}} </td>
        </ng-container>

        <!-- day10 Column -->
        <ng-container matColumnDef="day10">
          <th class="table-header" mat-header-cell *matHeaderCellDef> Shift </th>
          <td mat-cell *matCellDef="let col" class="align-left" > {{col | json}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"> </tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"> </tr>
      </table>
    </div>
 </mat-card-content>

In the day10 column, I'm using {{col | json}} to verify API data retrieval!

Need to display Month values from day1 to day31.

The returned JSON value assigns day1 on the 1st of every month, day2 on the 2nd of every month and so forth. Each 'day-' property holds distinct values like 'Shift 1', 'Shift 2' etc.

Every JSON response varies. For instance:

day15 response

[
 {
   "Name": "Bravo",
   "day15": "Shift 1"
 }
]

day20 response

[
 {
   "Name": "Adam",
   "day20": "Shift 2"
 }
]

** Problem:** How to handle the changing key values (day1 to day31) while rendering them in the Angular Material table template?

angular typescript angular-material

Answer 1

Answer №1

To extract the array of keys present in a response object, you can simply use the static method Object.keys. If you are certain that there will always be two entries, you can choose the one that is not named Name:

public getDayVal(data){
  Object.keys(data).forEach((k) => {
    if (k !== 'Name') return data[k];
  })
}

If you are unsure about the number of entries, you can use a regular expression (Regex) to detect if it matches a specific pattern:

public getDayVal(data){
  let re = /^day[0-9]+$/;
  Object.keys(data).forEach((k) => {
    if (re.test(k)) return data[k];
  })
}

Then, in your template, you can utilize the above helper function to retrieve the key dynamically:

<td mat-cell *matCellDef="let col" class="align-left" > {{getDayVal(col)}} </td>

Important: I'm omitting some necessary sanity checks in this explanation. It's essential to verify if the helper method will actually return anything and how to handle situations where the desired dayXX key is not found. You have the responsibility to address these issues, as currently, the table may display nothing in the column due to an undefined value from the helper method.

Lastly, consider revising your data model if you have the authority to do so. Storing information in a field name is a fundamental design flaw. An example of a better approach could be:

interface DayIfc {
  Name: string;
  Day: number;
  Shift: number;
}

This revised structure would help resolve the challenges you are facing.

Answer 2

To extract the array of keys present in a response object, you can simply use the static method Object.keys. If you are certain that there will always be two entries, you can choose the one that is not named Name:

public getDayVal(data){
  Object.keys(data).forEach((k) => {
    if (k !== 'Name') return data[k];
  })
}

If you are unsure about the number of entries, you can use a regular expression (Regex) to detect if it matches a specific pattern:

public getDayVal(data){
  let re = /^day[0-9]+$/;
  Object.keys(data).forEach((k) => {
    if (re.test(k)) return data[k];
  })
}

Then, in your template, you can utilize the above helper function to retrieve the key dynamically:

<td mat-cell *matCellDef="let col" class="align-left" > {{getDayVal(col)}} </td>

Important: I'm omitting some necessary sanity checks in this explanation. It's essential to verify if the helper method will actually return anything and how to handle situations where the desired dayXX key is not found. You have the responsibility to address these issues, as currently, the table may display nothing in the column due to an undefined value from the helper method.

Lastly, consider revising your data model if you have the authority to do so. Storing information in a field name is a fundamental design flaw. An example of a better approach could be:

interface DayIfc {
  Name: string;
  Day: number;
  Shift: number;
}

This revised structure would help resolve the challenges you are facing.

Is there a way to access the value or key of a JSON property in an Angular template for rendering purposes?

Answer №1

Similar questions

The error message "Declaration file for module 'mime' not found" was issued when trying to pnpm firebase app

Creating an Http interceptor in Ionic 3 and Angular 4 to display a loading indicator for every API request

Using *ngIf to construct SVG icons in Angular 2 doesn't contribute to the DOM in any way

Creating a custom `onSubmit` function with Formik, TypeScript, and hooks can be a powerful way

Issues with include and exclude directives in tsconfig.json are causing problems

The property '.....' is missing an initializer and has not been explicitly assigned in the constructor

Guide to transforming an IdentityMap<String, dynamic> into a UInt8List

Examining the array to ensure the object exists before making any updates in the redux

The font awesome symbol is not showing up in the nz-th element

Encounter an Unexpected Token Issue when using NextJS-auth0 in Jest

Triggering an event from a component to its parent module resulting in an exception situation

A step-by-step guide on bundling a TypeScript Language Server Extensions LSP using WebPack

Retrieve the initial token from a union, referred to as an "or list," in Typescript

Having trouble compiling the Electron App because of a parser error

Dynamically loading Angular modules based on API response is a powerful way to enhance

Is there a way to modify the style within a TS-File?

JavaScript alert box

Rendering React component within a production build of Angular 7

Sending data from view to controller in Angular using TypeScript

Guide on transforming a tuple of random types into a nested type structure with the help of recursive conditional types