CODEWITHSUNDEEP
javajsonangular
Sudosu0
Sudosu0

Reputation: 157

Angular *NgFor iterate strings in an array to Table TD tags

I have created an angular page which retrieves JSON data from a backend.

The Json output is formatted like

fields  
0   "count"
1   "Date"
2   "Status"
rows    
0   "["2","2019-11-21","Operate"]"
1   "["3","2019-12-12","Maintain"]"
________________________________________________

{
    "fields":
        ["count","Date","Status"],
    "rows":
        [
            "["2","2019-11-21","Operate"]",
            "["3","2019-12-12","Maintain"]"
        ],
    "id":
        0
}

I want to create a table on my frontend using the values from fields as the headers and the values from rows as the cells. For example

_____________________________
| count |   Date   | Status |
|---------------------------|
|   2   |2019-11-21| Operate|
|   3   |2019-12-12|Maintain|
-----------------------------

However when calling the data I am getting these results

| count                       |   Date   | Status |
|-------------------------------------------------|
|["2","2019-11-21","Operate"] |          |        |
|["3","2019-12-12","Maintain"]|          |        |
---------------------------------------------------

My html code for the table is as follows

<table class="table table-borderless table-striped table-hover" *ngIf="appDetail?.fields">
    <thead>
        <th *ngFor="let field of appDetail.fields" class="table-header">{{field}}</th>
    </thead>
    <tbody>
        <tr *ngFor="let row of appDetail.rows">
            <td *ngFor="let item of row">{{item}}</td>
        </tr>
    </tbody>
</table>

My Model

export class AppDetail {
    public fields: string[];
    public rows: string[][];
}

My Component 

public getSealData() {

    this.sealidService.getSplunkData(this.idValue).subscribe(data => {
      this.appDetail = data as AppDetail;

      console.log(data.fields);
      console.log(data.rows);

    })

  }

EDIT Now that I am iterating between the and I am getting the following error message in console

ERROR Error: Cannot find a differ supporting object of type String

I am assuming that related to my model?

EDIT Turns out I am not getting an array of arrays, but an array of strings. It looks like there was some decoding going on but the actual JSON looks more like this

"fields": 
    ["count","Date","Status"],
 "rows": 
    ["[\"2\",\"2019-11-21\",\"Operate\"]", "[\"3\",\"2019-12-12\",\"Maintain\"]"],

So the errors I am getting is due to the string values not being iterate-able. Console.log output console.log(data.rows)

0: "["2","2019-11-21","Operate"]"
1: "["2","2019-12-02","Maintain"]"

RESOLVED - I will have to work with the owner of the backend data in order to get the proper format in which the response Saurabh's answer will be applicable.

Upvotes: 0

Views: 1358

Answers (1)

Saurabh Yadav
Saurabh Yadav

Reputation: 3386

Working demo

you can do like this: Iterate on rows, row element itself are array than again iterate on those to render td

<tbody>
   <tr *ngFor="let row of appDetail.rows">
      <td *ngFor="let item of row">{{item}}</td>
   </tr>
</tbody>

Upvotes: 2

Related Questions