CODEWITHSUNDEEP
angulartypescripthtml-table
Simon
Simon

Reputation: 965

Angular / Typescript: way to create table from array

I get a JSON object from the backend which looks like:

export class Testobject {
  name: string;
  organization: string;
  mrn: string;
  checkresults: CheckResult[];
}

export class CheckResult {
  message: string;
  errortyp: string;
  name: string;
  timestamp: string;
}

Each test object has an array of different lengths of different CheckResults. I want to display the data in a table. The headings of the table are fixed. I do not know how to assign the elements of the array to the correct column of the table.

My problem is that the checkresult array may contain only 2/3 or 1/3 checkresults. For example, if only one is available that belongs in the third column, how can I place it there?

This is my current approach:

<thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Organization</th>
        <th>Result</th>
        <th>Date / Time</th>
        <th>CheckResult name 1</th>
        <th>CheckResult name 2</th>
        <th>CheckResult name 3</th>
      </tr>
      </thead>

      <tbody>
      <tr *ngFor="let testobject of testobjects">
        <td>{{testobject.mrn}}</td>
        <td>{{testobject.name}}</td>
        <td>{{testobject.organization}}</td>
        <td *ngFor="let checkresult of testobjects.checkresults">

          <div *ngIf="checkresult.errortyp == 'Error'" class="ccrdot red"></div>
          <div *ngIf="checkresult.errortyp == 'Warning'" class="ccrdot yellow"></div>
          <div *ngIf="checkresult.errortyp == 'successful'" class="ccrdot green"></div>
          <div *ngIf="checkresult.errortyp == null" class="ccrdot"></div>
        </td>
        <td>{{checkresult.timestamp}}</td>
      </tr>
      </tbody>

Desired result:

Each CheckResult has a name which shows which column it belongs to.

Id   Organization mrn        check name 1 check name 2  check name 3 
----------------------------------------------------
to1  | org1        | 1        |  error     |             | error      <- 2 element in Array 
to2  | org2        | 2        |            |             | error      <- 1 elements in Array 
to3  | org3        | 1        |            | error       |            <-1 element in Array

Upvotes: 4

Views: 11897

Answers (1)

xdeepakv
xdeepakv

Reputation: 8125

Since max error length is fixed. I think, instead of using for each in the td. You can fixed td based on your requirement. Same time you can use pipe/methods to check error type and show the messages.

A better way, as suggested in the comment. Use div, with layout system. which will auto align ur HTML

Sample:

<thead>
<tr>
  <th>ID</th>
  <th>Name</th>
  <th>Organization</th>
  <th>Result</th>
  <th>Date / Time</th>
  <th>Error1</th>
  <th>Error2</th>
  <th>Error3</th>
</tr>
</thead>

<tbody>
<tr *ngFor="let testobject of testobjects">
  <td>{{testobject.mrn}}</td>
  <td>{{testobject.name}}</td>
  <td>{{testobject.organization}}</td>
  <td>
    <div *ngIf="hasTypes(testobjects.checkresults, 'Error')"></div>
  </td>
  <td>
    <div *ngIf="hasTypes(testobjects.checkresults, 'Warning')"></div>
  </td>
  <td>
    <div *ngIf="hasTypes(testobjects.checkresults, 'Info')"></div>
  </td>
</tr>
</tbody>

Upvotes: 4

Related Questions