My JSON file structure is like the example below:
{
"id": "1",
"country": "Brazil",
"state": [
{"id": "1", "name": "Acre",
"city": [ { "id": "1", "name": "Rio Branco"},
{ "id": "2", "name": "Xapuri"},
{ "id": "3", "name": "Cruzeiro do Sul"} ]
}
In my view, I have set up 3 select options. The first one is for selecting a country, which will then populate the second select option with states based on the country ID. Upon selecting a state, the third select option should display cities related to that state.
I have implemented a PlacesService to fetch the JSON data:
getPlaces() {
return this.http.get('assets/database/places.json')
.map( (res: Response) => res.json());
}
In my component, I call the service as follows and it functions correctly:
this.placesService.getPlaces().subscribe(data => this.places = data);
While I can retrieve all the data from the JSON file, I am unsure how to search for a specific ID within the file and only return the object associated with that ID.
I am curious about the best approach to tackle this issue - should I store all objects in a single JSON file or divide them into separate files (e.g., countries.json, states.json, cities.json)?