CODEWITHSUNDEEP
arraysangular
Nathan
Nathan

Reputation: 301

Angular 2 how to iterate through multi-dimensional arrays?

EDIT#2

Unfortunately, I haven't had any success incorporating either one of these suggestions. It's late, so I'm heading off to bed, but I'll try to update tomorrow.

Thanks to Pradeep Jain for the help. I'll also try out the Pipe that evil mind suggested.

I've learned how to use the *ngFor command, but it looks like it only works with simple arrays. Here's the code I'm trying to iterate through.

import {Lesson} from './lesson';

export var LESSONS: Lesson[] = [
{
    "idL": 1,
    "subject": 'Chapter One',
    "points": [
                'picture story', 'spelling test', 'words'
            ]
},
{
    "idL": 2,
    "subject": 'Words',
    "points": [
            'words', 'bacon', 'proliferation'
    ]
}
]

So I am trying to access that second array called "points". I don't think it's improperly formatted, but I haven't been able to figure out how to access it.

I did read about angularJs's foreach command, but Angular2's documentation does not show such a command is available.

Any advice?

Upvotes: 7

Views: 21829

Answers (4)

davaus
davaus

Reputation: 1155

This worked for me in Angular 4, using Pardeep Jain's answer as a basis. Almost the same as StepUps answer, but with ng-containers:

 constructor() {

        this.data = {  
            displayArray:[
                ["Top Row 1st col", "Top Row 2nd col", "Top Row 3rd col"],
                ["Middle Row 1st col", "Middle Row 2nd col", "Middle Row 3rd col"],
                ["Bottom Row 1st col", "Bottom Row 2nd col", "Bottom Row 3rd col"]
            ]
        }

    };

in the template:

<table >
    <ng-container *ngFor="let row of data.displayArray; let i = index">
        <tr>
            <ng-container *ngFor="let col of row; let j = index">
                <td>{{col}}</td>
            </ng-container>
        </tr> 
    </ng-container>
</table>

I didn't need the indexes, but I left them in in case they are needed by others.

Upvotes: 2

StepUp
StepUp

Reputation: 38114

For example, you have the following multidimensional array:

TypeScript:

export class AppComponent {
  rows: any[] = [];      

  constructor() {     
    this.rows = this.multiArray;        
  }

  multiArray = [
    //row 1
    [
      {cellValue:'row1 col1', cellId: 1},
      {cellValue:'row1 col2', cellId: 1},
    ],
    //row 2
    [
      {cellValue:'row2 col1', cellId: 2},
      {cellValue:'row2 col2', cellId: 1}      
    ],
    //row 3
    [
      {cellValue:'row3 col1', cellId: 3},
      {cellValue:'row3 col2', cellId: 1}      
    ]
  ]
}

And you can loop through array like this:

HTML:

<table>
  <tr *ngFor="let row of rows; let i = index">    
    <td *ngFor="let cell of row; let i = index">        
          <b>{{ cell.cellValue }} editable</b>        
    </td>
  </tr>  
</table>

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86740

Update (2.0.0)

<table>
    <ng-container *ngFor="let lesson of LESSONS; let i = index">
      <ng-container *ngFor="let point of lesson.points; let j = index">
        <tr>{{point}}</tr>
      </ng-container>
    </ng-container>

<ng-container> is a helper element that is not stamped to the DOM. It allows to use the same syntax as inline *ngIf and *ngFor

Original

Try this one:

<table>
<template ngFor #lesson [ngForOf]="LESSONS" #i="index">
  <template ngFor #point [ngForOf]="lesson.points" #j="index">
  <tr>{{point}}</tr>
  </template>
</template>

Working example Working Plunker.

Upvotes: 11

evilmind
evilmind

Reputation: 116

try to use this pipe

@Pipe({ name: 'values',  pure: false })
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key]);
  }
}

<div *ng-for="#value of object | values"> </div>

Upvotes: 1

Related Questions