Angular *ngFor nested loop

Question

i have a json with array of object like this

questions = [
        {
            question: "What is your name?",
            options: [
                {
                    option1 : "Abc",                    
                }, {
                    option2 : "Def"
                }, {
                    option3 : "Ghi"
                }, {
                    option4 : "Jkl"
                }
            ]
        },
        {
            question: "Where is your Home Town?",
            options: [
                {
                    option1: "Abc"
                }, {
                    option2: "Def"
                }, {
                    option3: "Ghi"
                }, {
                    option4: "Jkl" 
                }
            ]
        }
      ]

and on my view i want to render that json with ngFor like that

What is your name?

Abc

Def

Ghi

Jkl

you might have to use angular pipes and *ngFor in order for this to work , something like this http://stackoverflow.com/questions/38060793/angular2-access-nested-json — Rahul Singh, May 03 '17 at 06:18
What exactly are you having trouble with? And who invented this bizarre data format? — , May 03 '17 at 06:23
@torazaburo i am getting problem in to render nested object that have option1, option2, option3, option4 — Ricky, May 03 '17 at 06:27
Check this http://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor — Pramod Patil, May 03 '17 at 06:35

Aravind · Answer 1 · 2017-05-03T06:38:53.977

0

questions = [{
            question: "What is your name?",
            options: [ "Abc", "Def", "Ghi", "Jkl"] 
           }, {            {
            question: "Where is your Home Town?",
            options: [ "Abc", "Def", "Ghi", "Jkl"] 
              }]

<div *ngFor="let q of questions">
    <span> {{q.question}}</span>
    <ul>
      <li *ngFor="option in q.options">{{option}} </li>
   </ul>
</div>

You should be using as above modify your json format

edited May 03 '17 at 06:38

answered May 03 '17 at 06:21

Aravind

40,391
16
91
110

3

Shouldn't this be `let q of questions`? – May 03 '17 at 06:23
@Aravind you are trying to change the question format i suppose but if suppose the data is comming from a webservice which is fixed then this will not work i suppose only if he has the flexiblity it might work – Rahul Singh May 03 '17 at 06:26
yes @RahulSingh data coming from web services – Ricky May 03 '17 at 06:29
@Ricky you might have to use the approach i suggested make use of pipes in order to format data. according to your need – Rahul Singh May 03 '17 at 06:30
@RahulSingh, it is needless to have the properties `option1, option2` and so on so that we can reduce the size of the data transfer. – Aravind May 03 '17 at 06:40
@Aravind i get that but the developer cannot change the design right you solution is optimal but not always we have the control over the json format – Rahul Singh May 03 '17 at 06:41
but still, I would always prefer to stick to the optimal solution rather than a quick and easy fix – Aravind May 03 '17 at 06:48
If the developer doesn't have control over the API he could still normalize data but then that logic should be part of the answer. – Aluan Haddad May 04 '17 at 22:52

Sachila Ranawaka · Answer 2 · 2017-05-03T07:26:55.017

0

create a pipe like this

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;
  }
}

call the pipe like this

<div *ngFor="#q of questions">
    <span> {{q.question}}</span>
    <ul>
      <li *ngFor="#option of q.options  ">
        <span *ngFor="#key of option | keys ">{{key}} : {{option[key]}}  </span>
      </li>
   </ul>
</div>

edited May 03 '17 at 07:26

answered May 03 '17 at 06:34

Sachila Ranawaka

39,756
7
56
80

i get the object in value but i want only value. – Ricky May 03 '17 at 07:21
@Ricky check the updated answer – Sachila Ranawaka May 03 '17 at 07:27

Angular *ngFor nested loop

2 Answers2