CODEWITHSUNDEEP
angulartypescript
Ajmal Sha
Ajmal Sha

Reputation: 956

Angular 2 synchronise API call

I'm new to Angular 2 . I tried to render the template after the response from the API but i'm facing issue like the API call response getting after the template rendering.

A part of my code snippet is :

    ngOnInit() {
  let productId = this.route.snapshot.params['id'];

  this.CommonService.fetchData("http://192.168.1.107:9000/api/test/user/userId.json?id=" + productId).subscribe(
    (data) => {
      this.productData = data[0];
      console.log(this.productData);
    }
  )
  this.productAdd = this._formBuild.group({
    firstName: [this.productData["firstName"]],
    shortName: [this.productData["shortname"]],


  })
}
fetchData(url){ 
  return this.http.get(url).map(
    (res) => res.json()
  )
}

Can anyone help me?

Upvotes: 0

Views: 61

Answers (1)

Thien Hoang
Thien Hoang

Reputation: 625

We have to create FormGroup before call Ajax API. And will update data after service finished.

ngOnInit() {

   this.productAdd = this._formBuild.group({
       firstName: '',
       shortName: ''
   });

   let productId = this.route.snapshot.params['id'];
   this.CommonService
   .fetchData("http://192.168.1.107:9000/api/test/user/userId.json?id=" + productId)
        .subscribe((data) => {
            const result = data[0];
            this.productAdd.patchValue({
                firstName: result.firstName,
                shortName: result.shortName
            })
        });

});

Service

fetchData(url){ 
    return this.http.get(url)
        .map((res)=>res.json());
}

Upvotes: 1

Related Questions