CODEWITHSUNDEEP
angularresttypescripthttp
Chandra Mouli
Chandra Mouli

Reputation: 49

Array object is not getting updated after the http service call

I am working on a scenario where i have to retrieve a list of objects from springboot using rest calls and populate them into the UI using angular 5.

my component looks like this,

export class BusinessComponent implements OnInit {

  serviceSavings:Services[] = [];

  constructor(private ServicesService:ServicesService) {
  }

  ngOnInit() {
    this.ServicesService.getServicesByCatID(PRODUCTSAVINGSID)
      .subscribe(serviceSavings => this.serviceSavings = serviceSavings);

    console.log("The length of serviceSavings :", this.serviceSavings.length); //this always prints zero.
  }

  examplemethod() {
    console.log("The length of serviceSavings :", this.serviceSavings.length);
  }
}

Now the problem is the log statement inside init() methods prints 0 rows of the service. i need to retrieve each service from the list and perform some actions on it.

The same log when i placed in a user defined method like calling it with user action in the UI. it displays the exact number of count of the list as per in the database table.

I need to write some business logic inside init() during the application load to display certain values in UI.

but the length of the list retrived is always 0 in init() while application load. i am not able to iterate through values. i think there is some update issue of the arrayobject.

my service method looks like this,

  getServicesByCatID(categoryid){
    return this.http.get(this.getServiceUrlByCategory(categoryid))
      .map(res => res.json());
  }

the springboot application is perfectly return the list of objects there is no problem from the backend.

could someone please help me in finding out the issue ?

Upvotes: 0

Views: 109

Answers (3)

Bellash
Bellash

Reputation: 8204

I had the same exact issue and I came to a conclusion that One should write this 

 this.ServicesService.getServicesByCatID(PRODUCTSAVINGSID)
 .subscribe(serviceSavings => this.serviceSavings = [...serviceSavings]);

instead of this.serviceSavings = serviceSavings and the same way, each time you wish to add an element to an array, you'd better write this.serviceSavings = [...serviceSavings, newServiceSaving] instead of .push(newServiceSaving)

Upvotes: 0

Fateh Mohamed
Fateh Mohamed

Reputation: 21387

you are trying to get the result before subscription finish, move it inside subscribe; and if you want to get this data in the view, you can use async Pipe for that:

export class BusinessComponent implements OnInit {
 serviceSavings : Observable<Services[]>;

constructor(private ServicesService: ServicesService){}

ngOnInit(){
 this.serviceSavings = 
  this.ServicesService.getServicesByCatID(PRODUCTSAVINGSID); 
}

and you can iterate over your data in the view:

<p *ngFor='let service of serviceSavings | async'></p>

Upvotes: 0

Arun Kumaresh
Arun Kumaresh

Reputation: 6311

move your console inside the subscribe()

ngOnInit(){

this.ServicesService.getServicesByCatID(PRODUCTSAVINGSID) 
.subscribe(serviceSavings => {this.serviceSavings = serviceSavings

  console.log("The length of serviceSavings :", this.serviceSavings.length)

  });

}

Upvotes: 2

Related Questions