mapping through the array of arrays ReactJS / JS

Question

I have the following code.

I have this array of array data.

    const data = [
    [
      {
        city: "Phnom Penh",
        country: "KH"
      },
      {
        city: "Tirana",
        country: "AL"
      },
      {
        city: "Andorra la Vella",
        country: "AD"
      }
    ],
    [
      {
        city: "Mariehamn",
        country: "AX"
      }
    ],
    []
    ];

I am trying to print all city in the new variable and then want to show in select

    const cities = data.map((el) => el).map((el, idx) => el[idx]?.city);

      <select>
        {cities.map((el) =>  (
          <option value={el} key={idx}>
            {el}
          </option>)}
      </select>

But I am getting only first city.

The output now is

    (3) ["Phnom Penh", undefined, undefined]

But the output should be

    (4) ["Phnom Penh", "Tirana", "Andorra la Vella", "Mariehamn"]

Please help me to correct my code.

Thanks.

do a flat and map. also dont use index as the key. use another unique identifier something like country code + cityname — cmgchess
– cmgchess, Commented Dec 27, 2022 at 8:00
You might want to have a look at Array.prototype.flatMap() — secan
– secan, Commented Dec 27, 2022 at 8:03

someone · Accepted Answer · 2022-12-27 08:07:55Z

2

I fixed your code

For an easy way to understand what's going on, I divided it into two variables.

  const a = data.flatMap((num) => num);
  const b = a.map((el) => el.city);

And then you can show it in your select tag

answered Dec 27, 2022 at 8:07

someone

6931 gold badge6 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cmgchess Over a year ago

flatMap internally does a map and a flat and the map step seems unnecessary in this case. therefore a flat is enough

user16938897 · Accepted Answer · 2022-12-27 08:17:10Z

const cities = data.flat().map(item => item.city);

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

The Javascript map() method in JavaScript creates an array by calling a specific function on each element present in the parent array. It is a non-mutating method. Generally, the map() method is used to iterate over an array and calling function on every element of the array.

console.log(cities);
// Output: ["Phnom Penh", "Tirana", "Andorra la Vella", "Mariehamn"]

Juljo Shahini · Accepted Answer · 2022-12-27 08:15:30Z

0

Since flat may not be available on every environment I am providing with an alternative solution:

let cities = [];
data.forEach(el=> {
    el.forEach(element => {
    cities.push(element.city);
  });
});

answered Dec 27, 2022 at 8:15

Juljo Shahini

14810 bronze badges

Collectives™ on Stack Overflow

mapping through the array of arrays ReactJS / JS

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related