javascript find() in nested array

Question

I'm trying to build a website with REACT. In the homepage you have 2 buttons, europe and usa. Let's say you click europe. Then you see a list of all the countries in europe. And when you click a country, you should see a list of CITIES in that country.

The question is, how can I access the items inside "cities"?.

       const DATA = [
       {
        id: 1,
        title: "EUROPE",
        countries: [
            {
                id: 1,
                country: "france",
                cities: [
                    {
                        id: 1,
                        city: "paris"
                        
                    },
                    {
                        id: 2,
                        city: "toulouse"
                     
                    }
        ];

         // so at homepage, you click "europe", and on the second page i got this:

         const StateCard = () => {
         const { title } = useParams();
         const selectedData = DATA.find( d => d.title === title);
         
         return(
         <div className="main">

         {selectedData &&
          selectedData.countries.map((item, id) => {

          return (
          <div className="card-container" >
           <Link key={id} to={`${title}/${item.country}`}> {item.country} </Link>
           </div>
       );
     })}
  </div>

useParams gives us back the title that added to the URL after the first click, which is "europe". selectedData gives us back the items inside "europe": {id: 1, title: "EUROPE", countries: Array(1)}

and now the screen shows "france". you clicked france, and now i wanna show the 2 cities inside. all i got is:

const { country } = useParams();

which gives us "france". but i dont know how to access the cities inside. i tried to play with DATA.countries.find(), but whatever i put after DATA. gives me "TypeError: Cannot read property 'find' of undefined".

sorry its so long thanks guys!

stackoverflow.com/questions/22343437/…

ISAE
– ISAE

2021-06-21 22:21:37 +00:00
Commented Jun 21, 2021 at 22:21 — ISAE
– ISAE, Commented Jun 21, 2021 at 22:21

Andy · Accepted Answer · 2021-06-21 23:55:47Z

Each type (continents, countries, cities) is an array. find won't work on DATA.countries because countries is a property of whatever continent object you select.

It may help you to divide up your data collections using a series of methods. getContinents gets the data as an argument, and the value of title. getCountries receives the array returned by getContinents - as well as the value of country - and returns its own array of countries, and then getCities maps over that data to return the city names.

This way you maintain a series of data collections, and the code is easier to maintain.

const data = [{"id":1,"title":"EUROPE","countries":[{"id":1,"country":"france","cities":[{"id":1,"city":"paris"},{"id":2,"city":"toulouse"}]}]}];

const title = 'EUROPE';
const country = 'france';
 
const getContinents = (data, val) => data.find(obj => obj.title === title)
const getCountries = (data, val) => data.countries.find(obj => obj.country === val)
const getCities = (data) => data.cities.map(obj => obj.city);

// Pass in the data and the value of title
const continents = getContinents(data, title);

// Use the array returned from `getContinents` and the country value
const countries = getCountries(continents, country);

// Use the array returned from `getCountries`
const cities = getCities(countries);

console.log(cities);

DecPK · Accepted Answer · 2021-06-21 22:30:29Z

You can first find the Country and then on countriesResult you can find citiesResult and then can find cities from citiesResult.cities.

You're getting the error **TypeError: Cannot read property 'find' of undefined** because

what you're doing is DATA.countries.find(). Data is an array so you can't use .countries on it. You have to find the country using find or use index.

const DATA = [{
  id: 1,
  title: "EUROPE",
  countries: [{
    id: 1,
    country: "france",
    cities: [{
        id: 1,
        city: "paris",
      },
      {
        id: 2,
        city: "toulouse",
      },
    ],
  }, ],
}, ];
const title = "EUROPE";
const country = "france";

const countriesResult = DATA.find((d) => d.title === title);
const citiesResult = countriesResult.countries.find(
  (c) => c.country === country
);

const result = citiesResult.cities.map((c) => c.city);

console.log(result);

NeNaD · Accepted Answer · 2021-06-21 22:24:19Z

0

DATA is an array of objects. Each item in DATA have countries array. So, you have to use find() on specific item in DATA array, and not on DATA array iteself. For example, you can do this:

DATA[0].countries.find()

answered Jun 21, 2021 at 22:24

NeNaD

20.8k11 gold badges64 silver badges118 bronze badges

Collectives™ on Stack Overflow

javascript find() in nested array

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related