Angular *ngFor loop through an array of arrays

Question

I have an array which contains other arrays inside like that:

array = [
           ["element A", "element B"],
           ["YES", "NO"]
        ]

And I want to loop through this array of object in an HTML table using ngFor:

   <table>
     <thead>
       <tr>
         <th>#</th>
         <th>COLUMN 1</th>
         <th>COLUMN 2</th>
       </tr>
     </thead>

     <tbody>
       <template *ngFor="let row of csvContent; let in = index">
         <th scope="row">{{in}}</th>
            <template *ngFor="let c of row; let in = index">
              <td>
               {{c[0]}}
              </td>
            </template>
       </template>
     </tbody>
  </table>

I want to display each inner array list below COLUMN1 and COLUMN2 respectively:

 COLUMN1   | COLUMN2
 --------------------
 element A | YES
 element B | NO

I can't figure it out how to use *ngFor properly in order to list an array of arrays (Simple list of strings). At the moment, it's either an empty array or a shifted & messed up Table presentation.

This is how looks the Table:

Or this wrong presentation because Element A and B should be below COLUMN 1 and YES, NO should be below COLUMN2:

@Jota.Toledo The array is perfectly fine, I just tried to represent how the Table should look like. I add now a screenshot to make it clear. — Nizar B.
– Nizar B., Commented Jan 8, 2018 at 12:53
no, remove the 1: and 2: from your example and that would be fine — Jota.Toledo
– Jota.Toledo, Commented Jan 8, 2018 at 12:55
@Jota.Toledo Thanks for your suggestion, I made the array looks correct now. — Nizar B.
– Nizar B., Commented Jan 8, 2018 at 12:56

Rohit · Accepted Answer · 2018-01-08 13:00:34Z

10

Your data is not arrays in arrays; it's two connected arrays. You need to treat it as such:

   <tbody>
     <tr *ngFor="let column of csvContent[0]; let in = index">
       <td>
         {{csvContent[0][in]}}
       </td>
       <td>
         {{csvContent[1][in]}}
       </td>
     </tr>
   </tbody>

This is not really a good way of organizing your data, as stuff is not really related. What if csvContent[0] gets a new entry, but 1 doesn't? Right now, your data doesn't represent a table, and I'd recommend transforming it in your controller to be tabluar, and then printing.

answered Jan 8, 2018 at 13:00

Rohit

3,2403 gold badges34 silver badges65 bronze badges

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

7 Comments

Nizar B. Over a year ago

What do you mean by "stuff is not really related"? it's a simple Array which contains other arrays with several strings. I believe *ngFor has a way to show multi-dimensional array. Don't worry about organizing the data, it's coming from a static CSV file.

Iancovici Over a year ago

@NizarBsb, your array is not organized by rows, it's organized by columns.

Nizar B. Over a year ago

That's right, does it means I need to rethink the structure of my array?

Iancovici Over a year ago

RhoVisions has the only correct answer here, surprised Adeeb even got an upvote. I would've restructured the array, but RhoVisions answer is completely acceptable

Rohit Over a year ago

@lancovivi I also recommend restructuring, thus the last line of my answer. Inverting the structure relationship will cause the least headaches over time.

|

Amit · Accepted Answer · 2018-01-08 12:55:15Z

4

Try this:

<table>
     <thead>
       <tr>
         <th>#</th>
         <th>COLUMN 1</th>
         <th>COLUMN 2</th>
       </tr>
     </thead>

     <tbody>
       <tr *ngFor="let row of csvContent;let i = index;">
          <td>{{i}}</td>
          <td *ngFor="let c of row">
              {{c}}
          </td>
       </tr>
     </tbody>
  </table>

I wasn't sure how your data looked like, but seems like this would help. You don't really need to use <template> tags (they're deprecated anyway in favor of <ng-template> tags.

Also, no need for index tracking if you're gonna access the array at that index anyway.

edited Jan 8, 2018 at 12:55

answered Jan 8, 2018 at 12:45

Amit

4,35323 silver badges25 bronze badges

8 Comments

Nizar B. Over a year ago

I've attached a screenshot, your snippet does not show the Table properly, I still have the same issue.

Amit Over a year ago

I updated now with the first column showing the index

Nizar B. Over a year ago

I have added a second screenshot to show you the result of your snippet. As you can see, the presentation is there but the rows are not below the right column.

Nizar B. Over a year ago

This is not going to work that way, think that element A and element B need to be below COLUMN1 and finally YES, NO need to be below COLUMN2. At the moment this is showing inline as the screenshot of a wrong example.

Amit Over a year ago

Please notice I added a first <td>{{i}}</td> to every <tr> in the loop.

|

Adeeb basheer · Accepted Answer · 2018-01-08 13:00:27Z

3

Simply loop like this

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>COLUMN 1</th>
      <th>COLUMN 2</th>
    </tr>
  </thead>

  <tbody>
    <tr *ngFor="let row of csvContent;let i = index;">
      <td>{{i}}</td>
      <td *ngFor="let c of row">{{c}}</td>
    </tr>
  </tbody>
</table>

answered Jan 8, 2018 at 13:00

Adeeb basheer

1,49010 silver badges20 bronze badges

1 Comment

Amit Over a year ago

My answer exactly

Collectives™ on Stack Overflow

Angular *ngFor loop through an array of arrays

3 Answers 3

7 Comments

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related