Angular2 iterate over array of objects

Question

I have an array like following:

causes: any= [
{
    'Specification': {
        'Missing':false,
        'Unclear':false,
        'Wrong':false,
        'Changed':false,
        'Better Way':false,
    },
    'Design': {
        'Missing':false,
        'Unclear':false,
        'Wrong':false,
        'Changed':false,
        'Better Way':false,
    },
    'Code': {
        'Missing':false,
        'Unclear':false,
        'Wrong':false,
        'Changed':false,
        'Better Way':false,
    },
    'Documentation': {
        'Missing':false,
        'Unclear':false,
        'Wrong':false,
        'Changed':false,
        'Better Way':false,
    },
}]

How can I iterate over it in my template? I tried something like:

<div class="mdl-grid">
    <div *ngFor=" let chunk of causes | chunks: 2; let j = index; " class="mdl-cell mdl-cell--4-col">
        <label *ngFor=" let cause of chunk| values " #checkbox class="mdl-checkbox mdl-js-checkbox">
            <input type="checkbox" name="causes" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">{{cause}}</span>
        </label>
    </div>
</div>

But it still gave me [object Object]. I am trying to populate each cause and against it those 5 checkboxes.

ngFor only accepts an array, but you're trying to iterate over an object from what I can see. — Chrillewoodz
– Chrillewoodz, Commented Apr 6, 2017 at 12:33
let chunk of causes[0] should clarify the situation a bit. — borkovski
– borkovski, Commented Apr 6, 2017 at 12:57

Mario Petrovic · Accepted Answer · 2017-04-06 13:13:50Z

5

In the code that you presented you only have one object inside array.

I assume that your array should look like this:

causes: any = [
    {
        name: 'Specification',
        values: {
            'Missing': false,
            'Unclear': false,
            'Wrong': false,
            'Changed': false,
            'Better Way': false,
        },
    },
    {
        name: 'Design',
        values: {
            'Missing': false,
            'Unclear': false,
            'Wrong': false,
            'Changed': false,
            'Better Way': false,
        },
    },
    {
        name: 'Code',
        values: {
            'Missing': false,
            'Unclear': false,
            'Wrong': false,
            'Changed': false,
            'Better Way': false,
        },
    },
    {
        name: 'Documentation',
        values: {
            'Missing': false,
            'Unclear': false,
            'Wrong': false,
            'Changed': false,
            'Better Way': false,
        },
    }
]

Your html should look like this

    <div class="mdl-grid">
        <div *ngFor=" let chunk of causes" class="mdl-cell mdl-cell--4-col">
            <div>Checkboxes for {{chunk.name}}</div>
            <div *ngFor=" let cause of chunk.values | keys">
               <label  #checkbox class="mdl-checkbox mdl-js-checkbox">
                   <input type="checkbox" [name]=" chunk.name + '_' + cause" class="mdl-checkbox__input">
                    <span class="mdl-checkbox__label">{{cause}}</span>
               </label>
            </div>
        </div>
    </div>

Where keys pipe is a custom pipe that returns keys of the object, which is array of strings. Code for pipe:

Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'keys',
    pure: false
})
export class KeysPipe implements PipeTransform {
    transform(value, args: string[]): any {
        return Object.keys(value);
    }
}

edited Apr 6, 2017 at 13:13

answered Apr 6, 2017 at 12:55

Mario Petrovic

8,44516 gold badges45 silver badges66 bronze badges

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

5 Comments

Thinker Over a year ago

This is a better solution, it's just that it is only printing []false,[]true with this code and not like: Specification with five checkboxes each with label Missing, Unclear etc.

Thinker Over a year ago

Yes perfect! I did it already :) Thanks for the suggestion to change the array structure. It makes more sense!

Mario Petrovic Over a year ago

Cheers! Glad it helped.

Mario Petrovic Over a year ago

If i understood you correctly, i created a plunker example: plnkr.co/edit/rOuKEDHLOCfBOBjwB2Xi

Thinker Over a year ago

Yes correc, exactly thatt! Thanks!

Community · Accepted Answer · 2017-05-23 12:17:36Z

2

Iterating over an object is not possible out-of-the box. However, you can use custom pipe like the below.

  import { PipeTransform, Pipe } from '@angular/core';
  @Pipe({name: 'keys'})
  export class KeysPipe implements PipeTransform {
    transform(value, args:string[]) : any {
     let keys = [];
     for (let key in value) {
       keys.push(key);
      }
      return keys;
    } 
  }

And use it as

  <tr *ngFor="#c of content">           
   <td *ngFor="#key of c | keys">{{key}}: {{c[key]}}</td>
  </tr>

Have a look here

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Apr 6, 2017 at 12:49

notnotundefined

3,8214 gold badges35 silver badges39 bronze badges

Collectives™ on Stack Overflow

Angular2 iterate over array of objects

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related