In rxjs, I try to fetch all the data first then I need to proceed to next line

Question

In Angular 5, I have observable array in service and I am subscribing this in component. And in the next line of statement I am checking whether the data was populated or not. But I found variable is not populated yet.

https://github.com/vsaravanan/ngx-mat-select-search.git

ERROR TypeError: Cannot read property 'slice' of undefined Error @ this.filteredBanksMulti.next(this.banks.slice());

I have a sample data running from jsonserver @ port 3000

        "banks"  :
        [
            { "name" : "apphugIndia", "id": "A"},
            { "name" : "batHugFr", "id": "B"},
            { "name" : "Bank C (France)", "id": "C"},
            { "name" : "hungary", "id": "D"},
            { "name" : "Hungary", "id": "E"},
            { "name" : "Bank F (Italy)", "id": "F"}
        ]

How to resolve this issue?

Answer 1

if you are doing like this

this.httpCall.getData().subscribe(data=>this.recoreds = data);
this.records 

then its not going to work as , you call to server is still not complete you must need to wait for data to populate , that means you can do operation in subscribe method only.

to avoid issue you need to put you code in subscribe

this.httpCall.getData().subscribe(data=> {
      this.records = data;
      //do code here which uses  this.records
 });