How to ngFor in angular2

Question

I have this set of data that i want to use in one of my ng2 projects:

{
  "Administration et gestion": [
    {
        "id": "1_1",
        "text": "Assistance comptable"
    },
    {
        "id": "1_2",
        "text": "Conseil fiscal et impots"
    },
    {
        "id": "1_3",
        "text": "Conseil juridique"
    },
    {
        "id": "1_4",
        "text": "Conseil auto-entrepreneur"
    }
  ],
  "Animaux": [
    {
        "id": "2_1",
        "text": "garde d'animaux"
    },
    {
        "id": "2_2",
        "text": "toitellage"
    }
  ],
  "Enfants": [
      {
          "id": "3_1",
          "text": "baby-sitting"
      },
      {
          "id": "3_2",
          "text": "aides au devoirs"
      }
  ],
}

Getting this data into ng1 was easy, I was doing something like this:

ng-repeat="(key, skill) in skills"

but angular2 doesn't support angular1 syntax, and solutions found don't work for me (some pipes). Rather that finding and pasting something randomly, can anyone help me to fully understand what I have to do here?

Possible duplicate of [Iterate through json string in Observable angular js 2](http://stackoverflow.com/questions/35339411/iterate-through-json-string-in-observable-angular-js-2) — Günter Zöchbauer, Mar 10 '16 at 09:40

score 3 · Accepted Answer · edited May 23 '17 at 11:54

3

You could create a custom pipe for this:

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

And use it like that:

<div *ngFor="#keyValue of skills | keys">
  <div>{{keyValue.key}}<div>
  <div *ngFor="#value of keyValue.value">
    {{value.id}} = {{value.text}}
  </div>
</div>

Don't forget to add the pipe in the pipes attribute of your component:

@Component({
  (...)
  pipes: [ KeysPipe ]
})

See this question for more details:

Invalid argument for pipe 'AsyncPipe'

edited May 23 '17 at 11:54

Community

1
1

answered Mar 10 '16 at 09:40

Thierry Templier

198,364
44
396
360

hi thierry , thanks for you quick answer , so the pipe works well for the keyValue.key , but seems to not work for value.text or id, the number of item in keyvalue is right , but i have a blank item please see http://prntscr.com/adfcot – PrinceZee Mar 10 '16 at 10:36
Oh! There was a typo in my code: `
` instead of `
`. I updated my answer...
– Thierry Templier Mar 10 '16 at 10:42
already corrected your typo , the number of item is correct but values are blank – PrinceZee Mar 10 '16 at 10:48
Could you try `{{value | json}}` instead of `{{value.id}} = {{value.text}}` to see the content of the `value` object? – Thierry Templier Mar 10 '16 at 10:49
its also blank when i use `{{value | json}}` – PrinceZee Mar 10 '16 at 10:56
I created a plunkr but I can't reproduce the problem. See this link: https://plnkr.co/edit/FkQcFE?p=preview. – Thierry Templier Mar 10 '16 at 11:02
Is the structure of data exactly the same than the provided one in your question? – Thierry Templier Mar 10 '16 at 11:04
yes the same i used a skills service to get data `this.skills = this.http.get('json/skills.json').map(res => res.json());` after i subscribe to the data , and display it ` getSkills(){ this.Skillservice.skills.subscribe(skills => { skills = this.skills = skills; console.log(skills) }) } ` – PrinceZee Mar 10 '16 at 11:08
I updated my plunkr with an HTTP request but it seems to work... Could you fork this plunkr and put your code in it to see if it works and what are the differences? – Thierry Templier Mar 10 '16 at 11:22
Yes its work on plunker , but seems to not work in ionic2 https://plnkr.co/edit/W6qmMlGNuVxVCUg2F2DS?p=preview – PrinceZee Mar 10 '16 at 11:41
Really? That's strange... Can you see array properties in your data when you do something like that: {{ skills | async }} ? – Thierry Templier Mar 10 '16 at 11:56
Oh great! What was the problem? – Thierry Templier Mar 10 '16 at 17:37
i was doing something wrong with ion-checkbox , thank you again – PrinceZee Mar 11 '16 at 00:04

How to ngFor in angular2

1 Answers1

Linked