-2

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
Improve this question
5
  • you might have to use angular pipes and *ngFor in order for this to work , something like this stackoverflow.com/questions/38060793/… Commented May 3, 2017 at 6:18
  • 1
    You want to display only first object in the array is it? Commented May 3, 2017 at 6:20
  • 1
    What exactly are you having trouble with? And who invented this bizarre data format? Commented May 3, 2017 at 6:23
  • @torazaburo i am getting problem in to render nested object that have option1, option2, option3, option4 Commented May 3, 2017 at 6:27
  • Check this stackoverflow.com/questions/35534959/… Commented May 3, 2017 at 6:35

2 Answers 2

Reset to default
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

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

8 Comments

Shouldn't this be let q of questions?
@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
yes @RahulSingh data coming from web services
@Ricky you might have to use the approach i suggested make use of pipes in order to format data. according to your need
@RahulSingh, it is needless to have the properties option1, option2 and so on so that we can reduce the size of the data transfer.
|
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>
Improve this answer

2 Comments

i get the object in value but i want only value.
@Ricky check the updated answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.