Assign values from http get response to variables in angular

Question

I am creating a settings application that has slide toggles.Currently I am using local storage to save the toggle state.However I want to change the toggle stage based on the server response.I want to toggle buttons based on the values set in a database.But I'm unbael to fetch the values.I am able to log the whole response but I don't know how to fetch values from that http response.Please help.Thanks in advance>

Here is my code:

Component

export class PolicyComponent implements OnInit {

      @Output() change: EventEmitter<MatSlideToggleChange>;
      @Input() checked: boolean;

      isChecked = true;
      formGroup: FormGroup;
      filteringSchedule: boolean;
      toggle: boolean;

      policy:Policy[];
      constructor(
        private formBuilder: FormBuilder,private policyService:PolicyService
      ) { }

      ngOnInit() {
        this.filteringSchedule = JSON.parse(sessionStorage.getItem('toggleButtonState'));
        this.formGroup = this.formBuilder.group({
          enableWifi: this.filteringSchedule,
          acceptTerms: [false, Validators.requiredTrue]
        });

        this.policyService.getPolicy().subscribe(
        (response)=>{
    console.log(response);    })


      }

  onFormSubmit(formValue: any) {
    alert(JSON.stringify(formValue, null, 2));
  }

  onChange(ob: MatSlideToggleChange) {
    this.filteringSchedule = !this.filteringSchedule;
    sessionStorage.setItem('toggleButtonState', JSON.stringify(this.filteringSchedule));
  }

}

Model:

export class Policy
{
    id:number;
    policy1:string;
    policy2:string;
}

Service:

export class PolicyService {

  constructor(private http:HttpClient) { }
  baseUrl:string="/policy";

  getPolicy()
  {
    return this.http.get<Policy[]>(this.baseUrl);

  }
}

Response is:

[
    {
        "id": 1,
        "policy1": "a",
        "policy2": "b"
    }
]

To whoever voted down this question, I think it is unreasonable for you to do so without telling the defaulter why you voted down his/her post. Please be constructive in your citicisms — orimdominic
– orimdominic, Commented Apr 16, 2019 at 7:26
@rock11 You are already fetching the response and logging it on your console. Is there anything you want to do with it? — orimdominic
– orimdominic, Commented Apr 16, 2019 at 8:40

tomichel · Accepted Answer · 2019-04-16 07:32:13Z

1

From what I can see, you should change this code:

   this.policyService.getPolicy().subscribe(
    (response)=>{
console.log(response);    })

to

this.policyService.getPolicy().subscribe(
        response => {
             this.policy = response;
        })

answered Apr 16, 2019 at 7:32

tomichel

3761 gold badge4 silver badges9 bronze badges

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

Comments

dannybucks · Accepted Answer · 2019-04-16 07:33:51Z

0

I guess you are almost there. Just save your response in a variable of your component:

export class PolicyComponent implements OnInit {
  serverData: any;

  ngOnInit() {
    this.filteringSchedule = JSON.parse(sessionStorage.getItem('toggleButtonState'));
    this.formGroup = this.formBuilder.group({
      enableWifi: this.filteringSchedule,
      acceptTerms: [false, Validators.requiredTrue]
    });

    this.policyService.getPolicy().subscribe(
      (response)=>{
        console.log(response);   

        this.serverData = response; // maybe you also want to only store one property, eg. this.serverData = response.data; 
     })
  }
}

Now you can access that variable in your HTML:

<div *ngFor="let policy of serverData">
  {{policy.policy1}}
  <p *ngIf="policy.policy2"> 
    This has another policy: {{policy.policy2}}
  </p>
</div>

answered Apr 16, 2019 at 7:33

dannybucks

2,3752 gold badges20 silver badges27 bronze badges

3 Comments

rock11 Over a year ago

I tried what you said but I'm unable to fetch the inner keys.I've added my response also in the question.Please see now

dannybucks Over a year ago

What do you mean 'you are unable to fetch inner keys'? Can you do this in the subscribe: console.log(this.serverData[0].id)? What is the result of that? I assume that what you put as response is copied from the console of the console.log(response), right?

rock11 Over a year ago

I didn't change anything.I just forgot that the response is an array.

Collectives™ on Stack Overflow

Assign values from http get response to variables in angular

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related