angular 2 how do i use repeatable code and display json data properly

Question

i am a noob to angular 2 and i really need to make some reuable code.

is there a way to make a shorter reuable version of this

answer1 = false;
answer2 = false;
answer3= false;

onClick1(){
   this.answer1 = true; 
   this.answer2 = false; 
   this.answer3 = false; 
 };

 onClick2(){
   this.answer1 = false; 
   this.answer2 = true; 
   this.answer3 = false; 
 };

 onClick3(){
   this.answer1 = false; 
   this.answer2 = false; 
   this.answer3 = true; 
 };

aswell as that does anyone know how i am surpossed to be displaying this information as i know this isnt right. i am bringing in this json code

[{
        "id": 1,
        "question":"What do you think of the new platform?",
        "Answers":{ 
        "answer1": "It's awesome",
        "answer2": "It's no better than the old version",
        "answer3": "It's confusing!"}



    }];

and i can only seem to display it by using *ngIf even though it is only one peice of information?

<p (click)="onClick1()" [class.active]="answer1" *ngFor="#question of questions">{{question.Answers.answer1}}</p>
<p (click)="onClick2()"[class.active]="answer2" *ngFor="#question of questions">{{question.Answers.answer2}}</p>
<p (click)="onClick3()"[class.active]="answer3" *ngFor="#question of questions">{{question.Answers.answer3}}</p>

anyone have any ideas?

Community · Accepted Answer · 2017-05-23 11:46:48Z

1

You could try something like that:

answers = {
  answer1: false,
  answer2: false,
  answer3: false,
};

onClick(answerNumber) {
  Object.keys(this.answers).forEach((key) => this.answers[key] = false);
  this.answers[answerNumber] = true; 
}

and use it this way in the template:

<template ngFor #answer [ngForOf]="answers | keyValues">
  <p (click)="onClick(answer.key)" 
        [class.active]="answers[answer.key]"
        *ngFor="#question of questions">
    {{question.Answers[answer.key]}}
  </p>
</template>

See this plunkr: https://plnkr.co/edit/6DenBCOfVnRRVy1rqPmN?p=preview.

The key / value pipe is described in this question:

print attributes values from JSON array in Angular2

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Apr 18, 2016 at 13:12

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

2 Comments

Adear Over a year ago

Thank you very much! you are a angular2 Wizard! I have no idea how that works i'm just glad it does :)

Thierry Templier Over a year ago

You're welcome ;-) The central point is to have an object containing the keys for possible answers...

Collectives™ on Stack Overflow

angular 2 how do i use repeatable code and display json data properly

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related