Cannot read property 'subscribe' of undefined after country drop down selection

Question

I am attempting to select state from a drop down, after selecting the country and I am to select the state, I do get this error even though everything looks perfect to me

core.js:6210 ERROR TypeError: Cannot read property 'subscribe' of undefined
    at FormComponent.getStateOnCountrySelection

Here is the ts file:

getStateOnCountrySelection(id){
    this.selectedStatesOption = [];
    this.countriesService.getStates(id).subscribe((data:any) =>{
      this.selectedStatesOption.push(data);
    });
  }

Here is the service class class to pick the states

public getStates(id: number): Observable<State[]> {
    let selectedStates;
    this.getCountries().subscribe((data:any) =>{
      let states = data["states"];
      selectedStates = states.filter((data:any) =>{
        return parseInt(data.id) == id
      });
    });
    return selectedStates;
  }

Please what am I doing wrong

score 1 · Answer 1 · answered Jan 18 '21 at 11:40

1

There are multiple issues here

You aren't returning anything from the function in the service.
The data is obtained asynchronously. It cannot be returned synchronously like you're attempting to. You need to return the observable from the function instead. You could use RxJS map operator to filter the response as per the requirement.

Service

public getStates(id: number): Observable<State[]> {
  let selectedStates;
  return this.getCountries().pipe(
    map((data: any[]) => (data['states'].filter(state => parseInt(state.id) == id)) as State[])
  );
}

Please read this answer in it's entirety to know how async data works.

answered Jan 18 '21 at 11:40

ruth

29,535
4
30
57

after selecting country, the state drop down is empty – Blaze Jan 18 '21 at 12:00
and on console it returns just one state – Blaze Jan 18 '21 at 12:24
Check if the response `data` actually does contain all the states. – ruth Jan 18 '21 at 12:38
Then you'd need to check if the backend service returns correct data. – ruth Jan 18 '21 at 13:55

score 0 · Answer 2 · answered Jan 18 '21 at 11:42

0

You are retuning an array not an observable.

This is an approximate function. Maybe have issues.

public getStates(id: number): Observable<State[]> {

    return this.getCountries().pipe(map((data:any) =>{
      
      let states = data["states"];
      return  states.filter((data:any) =>{
        return parseInt(data.id) == id
      });
    }));
  }

answered Jan 18 '21 at 11:42

dmance

628
1
8
26

returns just one state and state is not populated – Blaze Jan 18 '21 at 12:23
use a console.log before the filter and check if data is comming populated from the server. – dmance Jan 18 '21 at 12:46

Cannot read property 'subscribe' of undefined after country drop down selection

2 Answers2