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

Securely transfer data between objects using a for loop

What is the procedure for setting up the typings folder in AngularJS 1.5 with TypeScript?

How can I integrate React-Router Link as a component within Material-UI using Typescript?

Encountering a compilation error due to a Typescript assignment

Issue encountered in event.d.ts file at line 74, character 76: TypeScript error TS2370: A rest parameter is required to be an array type

Exporting declarations and different export types within a TypeScript ambient module

An issue occurred: the channel has been terminated within the ChildProcess.target.send function at internal/child_process.js, line 562, character

What is the reason behind the restriction on creating circular dependencies in Ionic applications?

Does Angular 8 development mode implement tree-shaking?

What is the process for creating static pages that can access local data within a NextJS 13 application?

How can TypeScript allow an argument to only accept keys that match another argument?

Custom Validation requires promises to be present

Creating dynamic components from JSON elements does not trigger a rerender of components within an array

Is there a way to manually trigger a re-render of a component?

Understanding Restangular with Typescript can be challenging, especially when dealing with a 'restangularized' response object

This phrase cannot be invoked

Error message: Angular 2 JsonpModule import not defined

Delete one item from a group of objects[]

Using Stack and Drawer Navigations Together in React Native Navigation(v6)

What is the process for implementing a type hint for a custom Chai assertion?