Отображение через массив массивов ReactJS/JS
У меня есть следующий код .
У меня есть этот массив данных массива.
const data = [
[
{
city: "Phnom Penh",
country: "KH"
},
{
city: "Tirana",
country: "AL"
},
{
city: "Andorra la Vella",
country: "AD"
}
],
[
{
city: "Mariehamn",
country: "AX"
}
],
[]
];
Я пытаюсь напечатать все city в новой переменной, а затем хочу показать в 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>
Но я получаю только первый город.
Выход сейчас
(3) ["Phnom Penh", undefined, undefined]
Но вывод должен быть
(4) ["Phnom Penh", "Tirana", "Andorra la Vella", "Mariehamn"]
Пожалуйста, помогите мне исправить мой код.
Спасибо.
Возможно, вы захотите взглянуть на Array.prototype.flatMap()
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я исправил твой код
Для простоты понимания того, что происходит, я разделил его на две переменные.
const a = data.flatMap((num) => num);
const b = a.map((el) => el.city);
И тогда вы можете показать это в своем теге select
flatMap внутренне создает карту и плоскость, и в этом случае шаг карты кажется ненужным. поэтому квартиры достаточно
Поскольку квартира может быть недоступна в каждой среде, я предлагаю альтернативное решение:
let cities = [];
data.forEach(el=> {
el.forEach(element => {
cities.push(element.city);
});
});
const cities = data.flat().map(item => item.city);
Метод flat() создает новый массив со всеми элементами подмассива, объединенными в него рекурсивно до указанной глубины.
Метод Javascript map() в JavaScript создает массив, вызывая определенную функцию для каждого элемента, присутствующего в родительском массиве. Это немутирующий метод. Как правило, метод map() используется для перебора массива и вызова функции для каждого элемента массива.
console.info(cities);
// Output: ["Phnom Penh", "Tirana", "Andorra la Vella", "Mariehamn"]
сделать квартиру и карту. также не используйте индекс в качестве ключа. используйте другой уникальный идентификатор, например, код страны + название города