Combining Rxjs map and filter to extract countries and their corresponding states from a JSON dataset

Question

Combining Rxjs map and filter to extract countries and their corresponding states from a JSON dataset

I have a unique dataset in JSON format that includes information about countries and states. For example:

 {
  "countries": [
    {
      "id": 1,
      "name": "United States"
    },
    {
      "id": 2,
      "name": "India"
    }],
  "states": [
    {
      "id": 1,
      "countryId": 1,
      "name": "Alabama"
    },
    {
      "id": 2,
      "countryId": 1,
      "name": "Alaska"
    } ] }

With this data, I created a Service to retrieve the countries and states for displaying in dropdown menus:

export class CountriesService {

  constructor(private http: HttpClient) { }

  public getCountries(): Observable<Country[]> {

    return this.http.get<Country[]>("assets/data.json").pipe(map(obj => obj["countries"]));

  }

  public getStates(countryId: number): Observable<State[]> {
    return this.http.get<State[]>("assets/data.json").pipe(
      map(res => res["states"]), 
      map(res => { if (res.countryId === countryId) return res;}));

  }
}

Although the getCountries() method works perfectly, fetching all the countries, I am facing issues retrieving specific states based on the countryId using the getStates method.

Currently, this method is not returning any results. Any idea what might be going wrong?

javascript json angular typescript rxjs

Answer 1

Answer №1

Ensure to apply the filter once the data is acquired.

export class CountriesService {
  constructor(private http: HttpClient) { }

  public getCountries(): Observable<Country[]> {
    return this.http.get<Country[]>("assets/data.json").pipe(
      map(obj => obj["countries"]),
    );
  }

  public getStates(countryId: number): Observable<State[]> {
    return this.http.get<State[]>("assets/data.json").pipe(
      map(res => res["states"]), 
      withLatestFrom(of(countryId)),
      map((id, states) => states.filter(state.countryId === id)),
    );
  }
}

It is also recommended to merge all information together to prevent multiple requests for state data which remains constant.

export class CountriesService {

  constructor(private http: HttpClient) { }

  public getCountriesWithStates(): Observable<Country[]> {
    return this.http.get<Country[]>("assets/data.json").pipe(
      map(data => data.countries.map(country => ({
        ...country,
        states: data.states.filter(state => state.countryId === country.id),
      }))),
    );
  }
}

service.getCountriesWithStates().subscribe(countries => {
// countries[0].states[0];
});

Answer 2

Ensure to apply the filter once the data is acquired.

export class CountriesService {
  constructor(private http: HttpClient) { }

  public getCountries(): Observable<Country[]> {
    return this.http.get<Country[]>("assets/data.json").pipe(
      map(obj => obj["countries"]),
    );
  }

  public getStates(countryId: number): Observable<State[]> {
    return this.http.get<State[]>("assets/data.json").pipe(
      map(res => res["states"]), 
      withLatestFrom(of(countryId)),
      map((id, states) => states.filter(state.countryId === id)),
    );
  }
}

It is also recommended to merge all information together to prevent multiple requests for state data which remains constant.

export class CountriesService {

  constructor(private http: HttpClient) { }

  public getCountriesWithStates(): Observable<Country[]> {
    return this.http.get<Country[]>("assets/data.json").pipe(
      map(data => data.countries.map(country => ({
        ...country,
        states: data.states.filter(state => state.countryId === country.id),
      }))),
    );
  }
}

service.getCountriesWithStates().subscribe(countries => {
// countries[0].states[0];
});

Answer 3

Answer №2

When the API call returns an observable, it is actually emitting an array due to your map function, not an array of observables. Therefore, the second map function you are using is not functioning as expected. Instead, within the first map, you can filter out the states that have the desired country id by utilizing a method called filter which is available on JavaScript arrays.

public getStates(countryId: number): Observable<State[]> { return this.http.get<State[]>("assets/data.json").pipe( map(res => res["states"].filter(res => res.countryId === countryId)); }

Answer 4

When the API call returns an observable, it is actually emitting an array due to your map function, not an array of observables. Therefore, the second map function you are using is not functioning as expected. Instead, within the first map, you can filter out the states that have the desired country id by utilizing a method called filter which is available on JavaScript arrays.

public getStates(countryId: number): Observable<State[]> { return this.http.get<State[]>("assets/data.json").pipe( map(res => res["states"].filter(res => res.countryId === countryId)); }

Combining Rxjs map and filter to extract countries and their corresponding states from a JSON dataset

Answer №1

Answer №2

Similar questions

Developing an Azure pipeline to generate artifacts for an Angular Universal application

The wrap() method in jQuery clones elements multiple times

Creating a consistent base URL for both Vue and Apache reverse proxy configurations

Encountering issue with POST operation in GraphQL on Angular application integrated with AWS Amplify and DynamoDB

The issue of the marker vanishing upon refreshing the page on AngularJS

Encountering issues with verifying login credentials in Angular 2

Click to add a different template into the document

A more efficient method for querying documents based on ids that are not in a given list and then sorting them by a specific publish date

I am looking to transfer an image stored in a database onto a card

Having trouble fetching JSON response in Scalatra with JPA for ORM implementation

Ways to forward a webpage once validation has been completed

Tips for implementing event handlers on dynamically generated li elements in VueJS

Tools for parsing command strings in NodeJS

Angular 6 - Resolving the Issue of 'Function calls are not supported in decorators' in Production Builds

MQTT: The method net.createConnection does not exist

How to completely disable a DIV using Javascript/JQuery

Show or hide a Div based on radio button selection problem

Load jQuery results when scrolling to the top of the window

What is the method for breaking a statement within an if statement on Blogger when both the IF and ELSE conditions are met?

Removing a targeted element from an array in Angular