Filter and return multiple values from JSON nested List

Issue

I have a JSON file contains the name of the US state and cities-

[
  {
    "state": "Iowa ",
    "id": "IA",
    "places": [
      {
        "city": "Ames",
        "description": "ames-description"
      },
      {
        "city": "Davenport ",
        "description": "davenport-description"
      }
    ]
  },
  {
    "state": "Illinois ",
    "id": "IL",
    "places": [
      {
        "city": "Chicago",
        "description": "chicago-description"
      },
      {
        "city": "Elgin ",
        "description": "elgin-description"
      },
      {
        "city": "Joliet ",
        "description": "joliet-description"
      }
    ]
  }
]

I would like to filter out the list by city name and return the description, corresponding state, and state id. Here is my code for the filtering the list-

const cityname = Elgin;// 

//Filter array which matches the constant
const filterPosts = stateNames.map((filterPlaces) => {
  return filterPlaces.places.filter((getArray) => getArray.city === cityname);
});

//Get the name
const getCity = filterCity.map((topicCityArray) =>
  topicCityArray.map((getCityTitle) => {
    return getCityTitle.city;
  }),
);

My App.tsx

Update: I want it to be dynamic. Here is my full CityPage.tsx file

const CityDetailsPage = () => {


    //Get city ID from URL
    const { cityname } = useParams() //let's say Elgin

    //Filter array which matches the constant
const filterPosts = stateNames.map((filterPlaces) => {
  return filterPlaces.places.filter((getArray) => getArray.city === cityname);
});

//Get the name
const getCity = filterCity.map((topicCityArray) =>
  topicCityArray.map((getCityTitle) => {
    return getCityTitle.city;
  }),
);

   



    return (
        <>
        
            <p>{getCity}</p>
           
        </>
    )
}

export default CityDetailsPage

It returns the city name. I could not figure out how to return the corresponding description, state name, and state id. Say someone clicks the Elgin, this code will match the value from the list and return the following- Name of the city, state ID, Full name of the State, and the description of the city, something like-

Elgin, IL
Illinois
description of Elgin

Any suggestion would be appreciated. Thanks in advance.

Solution

You can use Array.prototype.flatMap() to produce a flat array from a nested result.

Combine this with filter() to reduce the flat list to the matching cities

// Your data minified
const stateNames = [{"state":"Iowa ","id":"IA","places":[{"city":"Ames","description":"ames-description"},{"city":"Davenport ","description":"davenport-description"}]},{"state":"Illinois ","id":"IL","places":[{"city":"Chicago","description":"chicago-description"},{"city":"Elgin ","description":"elgin-description"},{"city":"Joliet ","description":"joliet-description"}]}];

// Create a flat map
const allPlaces = stateNames.flatMap(({ state, id, places }) =>
  places.map((place) => ({
    stateName: state,
    stateId: id,
    ...place,
  })),
);

// Filter by city
const cityname = 'Elgin';
const matches = allPlaces.filter(({ city }) => city.trim() === cityname);
console.log(matches);

This has the benefit of producing a single list that you can search multiple times for different matches (a reasonably common search usage).

---

In the context of a React app, you can use it like this

import stateNames from './states.json'; // just guessing

const allPlaces = stateNames.flatMap(({ state, id, places }) =>
  places.map((place) => ({
    stateName: state,
    stateId: id,
    ...place,
  })),
);

const CityDetailsPage = () => {
  //Get city ID from URL
  const { cityname } = useParams();

  const cities = allPlaces.filter(({ city }) => city.trim() === cityname);

  return cities.map((place) => (
    <p>
      {place.city.trim()}, {place.stateId}<br />
      {place.stateName}<br />
      {place.description}
    </p>
  ));
};

Answered By - Phil