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

Question

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.

Show us the actual JSON instead of this weird representation. And why are you using ngFor on a container instead of on tr itself? Why are there two AngularJS ng-repeat in the middle of this Angular markup? Use Angular ngFor. Not AngularJS ng-repeat. — JB Nizet
– JB Nizet, Commented Dec 12, 2019 at 14:58
@JBNizet added JSON and removed the repeats. Sorry was trying all different things and left some garbage behind — Sudosu0
– Sudosu0, Commented Dec 12, 2019 at 15:25
Now you're not iterating to generate the tr anymore. The structure you had was correct, but you used ng-repeat instead of ngFor. You need to iterate on the rows to generate the trs, and in each row, iterate on the elements to generate the tds — JB Nizet
– JB Nizet, Commented Dec 12, 2019 at 15:30
Do you have control over the backend? Also, can you paste the exact response you get by doing a console.log(data)? — Nicholas K
– Nicholas K, Commented Dec 12, 2019 at 16:20

Saurabh Yadav · Accepted Answer · 2019-12-12 16:43:44Z

2

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>

edited Dec 12, 2019 at 16:43

answered Dec 12, 2019 at 15:08

Saurabh Yadav

3,3861 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

JB Nizet Over a year ago

Why the ng-containers. they're useless. Just put the ngFor on the tr and the td.

Sudosu0 Over a year ago

@JBNizet When trying to use NgFor on the TR and TD tags, you get errors stating that ngFor is not valid for that type of tag

Sudosu0 Over a year ago

@Saurabh I followed your example as well as modified my code above. Please see the error message output

Martin Parenteau Over a year ago

@Sudosu0 - I don't see the error messages (see this stackblitz).

Saurabh Yadav Over a year ago

@JBNizet ya you are right, in this there is no need to use ng-container, i have updating the answer

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related