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

Where specifically in the code should I be looking for instances of undefined values?

Incorporating and designing a side button using jQuery Mobile

Guide for converting a JavaScript function with spread arguments of different types to C# style

Creating HTML input elements dynamically using Javascript

Is it possible for numerous identical components to trigger the display of the identical modal on a single webpage?

Tips for Implementing Cache Busting in Angular Universal

Discover a method to receive an alert when the mouse exits the inner window along the y-axis

Exploring the functions of the elasticsearch javascript library: Understanding the search_type feature

Error message: "When using selenium-webdriver in JavaScript, the findElement method for <a> tags cannot be used as a function."&

Mastering the use of npm and sails to create HTML-PDF files effortlessly

Struggling to send information to the data layer on every page in Angular 9

Avoiding content resizing when using a drawer in Material UI

Why is interpolation not allowed in Angular 2 for binding to my child component?

Narrow down JSON data by chosen element

React Material-UI - implementing custom colors in Alert component leads to error: "Cannot read properties of undefined (reading 'type')"

What is the best way to determine if the current page in Ionic 2 is being loaded from the sidemenu?

Error code TS7053 occurs when an element implicitly has an 'any' type because a string expression cannot be used to index an empty object

Encountering an issue with Invariant Violation when attempting to retrieve a frame that is outside of the specified

What is the process for displaying or hiding a large image when clicking on thumbnail images?

Troubleshooting the importing of external data to a D3.js tree diagram