Arrays within Arrays in Angular

Question

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.

What is tableSampleData a collection of ITableSampleData2 ? you have to iterate (ngFor) over the Records array, then on Row ... <div *ngFor="let tsd of tableSampleData.Records"> <tr *ngFor="let row of tsd.Row;"> <td *ngFor="let dta of row"> {{dta}} </td> </tr></div> should work — Julien Roy
– Julien Roy, Commented Jun 22, 2017 at 20:15
Thank you for your help. The problem is, it does not display anything. This is the issue I've been having all along. Code that looks like it should work it not working. Nothing is displayed with {{dta}} — Jim Ritchhart
– Jim Ritchhart, Commented Jun 23, 2017 at 12:19

Kaciano Ghelere · Accepted Answer · 2017-06-22 20:23:52Z

1

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>

answered Jun 22, 2017 at 20:23

Kaciano Ghelere

3931 gold badge4 silver badges14 bronze badges

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

1 Comment

Jim Ritchhart Over a year ago

Thanks for the help. I modified your code above to indicate what loop is printing: <tbody ngFor="let tsd of tableSampleData"> / .aa.. / <tr *ngFor="let record of tsd.Records"> / .bb.. / <td *ngFor="let dta of record.Row"> / .cc.. / </td> </tr> </tbody> The interesting thing is only the / .aa.. */ are printing. That tells me that it is not getting into the second loop for some reason.

Collectives™ on Stack Overflow

Arrays within Arrays in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related