CODEWITHSUNDEEP
javascriptangular
Jim Ritchhart
Jim Ritchhart

Reputation: 11

Arrays within Arrays in Angular

I'm trying to display, in an Angular page, a sample list of data stored in a file. This is for a data dictionary application. It means I don't know ahead of time the field names since it could be any file and any number of columns. My JSON looks like this ( although I'm flexible if it needs adjusting ).

 [{
    "FileName": "QUOTHDR",
    "Records": [{
            "Row": [
                " 7", " 1", " ", " 15", " 71", " ", " 6617", " 1", " 1", " ", " ", " R-2017-0063674", " 2017-06-15-08.58.44.817197", " .0000", " ", " 60007", " ORIGIN (1)", " ", " ", " 174", " ", " 141741", " 1", " ", "2017-06-15-09.23.14.831709", " 6617", " ", " ", " 2017-06-15-09.34.09.200973"
            ]
        },
        {
            "Row": [
                " 7", " 1", " ", " 15", " 71", " ", " 6617", " 1", " 1", " ", " ", " R-2017-0063674", " 2017-06-15-08.58.44.817197", " .0000", " ", " 60007", " ORIGIN (1)", " ", " ", " 174", " ", " 141741", " 1", " ", "2017-06-15-09.23.14.831709", " 6617", " ", " ", " 2017-06-15-09.34.09.200973"
            ]
        }
    ]
 }]

I implement this in my service:

    export interface ITableSampleData2 {
    fileName: string;
    Records: any[] ;
    }

And my HTML iterates the Records array and the Row Array like:
            <tbody>
                <div *ngFor="let tsd of tableSampleData">

                <tr *ngFor="let row of tsd.Row;">                        

                    <td  *ngFor="let dta of row;  let i = index">
                        {{dta[i]}}
                    </td>

                </tr>
                </div>
            </tbody>

I have searched for a number of examples, used ng-repeat, *ngFor with []. Nothing seems to work. I think I'm close but I'm either getting nothing coming out or errors in the console log. I've also tried {{i}}. Any help or suggestions would be much appreciated.

Upvotes: 1

Views: 57

Answers (1)

Kaciano Ghelere
Kaciano Ghelere

Reputation: 393

I think you're getting lost in the iterations.

It should look like this if you do it the "right way":

/* I removed the <div> inside the <tbody>, just to clarify :) */
<tbody *ngFor="let tsd of tableSampleData">
    /* ... */
    <tr *ngFor="let record of tsd.Records;">
        <td  *ngFor="let dta of record.Row;  let i = index">
            /* ... */
        </td>
    </tr>
</tbody>

Upvotes: 1

Related Questions