#javascript #reactjs #typescript
#javascript #reactjs #typescript
Вопрос:
у меня есть данные, подобные приведенным ниже,
const items = [
{
id: '1',
color: 'green',
name: 'item1',
polygons: [
{
id: '1',
coordinates: [
{
latitude: '25.00',
longitude: '-25.99',
}
{
latitude: '15.00',
longitude: '-25.99',
}
{
latitude: '25.00',
longitude: '-35.99',
}
],
}
]
subItems: [
{
id: '1',
name: 'subitem-1',
color: 'green',
polygons: [
{
id: '2',
coordinates: [
{
latitude: '25.00',
longitude: '-25.99',
}
{
latitude: '15.00',
longitude: '-25.99',
}
{
latitude: '25.00',
longitude: '-35.99',
}
],
}
]
}
],
},
{
id: '2',
color: 'red',
name: 'item2',
polygons: [
{
id: '3',
coordinates: [
{
latitude: '25.00',
longitude: '-25.99',
}
{
latitude: '15.00',
longitude: '-25.99',
}
{
latitude: '25.00',
longitude: '-35.99',
}
],
}
]
subItems: [
{
id: '2',
name: 'subitem-1',
color: 'red',
polygons: [
{
id: '5',
coordinates: [
{
latitude: '25.00',
longitude: '-25.99',
}
{
latitude: '15.00',
longitude: '-25.99',
}
{
latitude: '25.00',
longitude: '-35.99',
}
],
}
]
}
],
}
]
Теперь я хочу получить все полигоны из каждого элемента и подпункта в массив объектов, чтобы ожидаемый результат был таким, как показано ниже,
const polygons = [
{
id: '1',
color: 'green', //this comes from item.color
coordinates: [
{
latitude: '25.00',
longitude: '-25.99',
}
{
latitude: '15.00',
longitude: '-25.99',
}
{
latitude: '25.00',
longitude: '-35.99',
}
],
},
{
id: '2',
color: 'green', //this comes from subItems color
coordinates: [
{
latitude: '25.00',
longitude: '-25.99',
}
{
latitude: '15.00',
longitude: '-25.99',
}
{
latitude: '25.00',
longitude: '-35.99',
}
],
},
{
id: '3',
color: 'red', //this comes from Item color
coordinates: [
{
latitude: '25.00',
longitude: '-25.99',
}
{
latitude: '15.00',
longitude: '-25.99',
}
{
latitude: '25.00',
longitude: '-35.99',
}
],
},
{
id: '4',
color: 'red', //this comes from subItems color
coordinates: [
{
latitude: '25.00',
longitude: '-25.99',
}
{
latitude: '15.00',
longitude: '-25.99',
}
{
latitude: '25.00',
longitude: '-35.99',
}
],
},
]
Теперь вопрос, как я могу использовать метод reduce, чтобы получить массив полигонов, подобный приведенному выше, из массива Items, используя javascript или typescript. Спасибо.
Редактировать:
я пытался сделать что-то подобное, но это извлекает только полигоны из объекта Item, но я также хочу, чтобы полигоны SubItems тоже были.
export interface Polygon {
id: string;
coordinate: Coordinate[];
item: Item;
}
export interface DrawablePolygon extends Polygon {
color: string;
}
const polygons = React.useMemo(() => {
return Items.reduce((acc: DrawablePolygon[], Item) => {
(Item.polygons || []).forEach(polygon => {
acc.push({ ...polygon, color: Item.color });
});
return acc;
}, []);
}
как я могу это исправить. Спасибо.
Ответ №1:
Пожалуйста, попробуйте ниже
const items = [
{
id: '1',
color: 'green',
name: 'item1',
polygons: [
{
id: '1',
coordinates: [
{
latitude: '25.00',
longitude: '-25.99',
},
{
latitude: '15.00',
longitude: '-25.99',
},
{
latitude: '25.00',
longitude: '-35.99',
}
],
}
],
subItems: [
{
id: '1',
name: 'subitem-1',
color: 'green',
polygons: [
{
id: '2',
coordinates: [
{
latitude: '25.00',
longitude: '-25.99',
},
{
latitude: '15.00',
longitude: '-25.99',
},
{
latitude: '25.00',
longitude: '-35.99',
}
],
}
]
}
],
},
{
id: '2',
color: 'red',
name: 'item2',
polygons: [
{
id: '3',
coordinates: [
{
latitude: '25.00',
longitude: '-25.99',
},
{
latitude: '15.00',
longitude: '-25.99',
},
{
latitude: '25.00',
longitude: '-35.99',
}
],
}
],
subItems: [
{
id: '2',
name: 'subitem-1',
color: 'red',
polygons: [
{
id: '5',
coordinates: [
{
latitude: '25.00',
longitude: '-25.99',
} ,
{
latitude: '15.00',
longitude: '-25.99',
} ,
{
latitude: '25.00',
longitude: '-35.99',
}
],
}
]
}
],
}]
let result = [];
items.forEach((item) => {
item.polygons.forEach((polygon) => {
polygon.color = item.color;
});
result = result.concat(item.polygons);
item.subItems.forEach((subItem) => {
subItem.polygons.forEach((subItemPolygon) => {
subItemPolygon.color = subItem.color
});
result = result.concat(subItem.polygons);
});
});
console.log(result);
Комментарии:
1. Спасибо. но мне также нужно свойство color для каждого многоугольника элемента, который является item.color, и свойство color для каждого многоугольника подпункта, который из SubItem.color
2. Я обновил ответ. Пожалуйста, проверьте и, пожалуйста, поддержите, чтобы отметить как ответивший, если это поможет, спасибо.
Ответ №2:
Вот мое решение
interface NestedWithPolygons{
polygons: [Polygon],
subItems: [NestedWithPolygons],
color: string
};
type Polygon = any
const getPolygons = (x: NestedWithPolygons) => x.polygons.map((p,i) => ({...p, color:x.color})).concat((x.subItems || []).flatMap(getPolygons));
console.log(items.flatMap(getPolygons));
Комментарии:
1. Спасибо. можете ли вы сказать мне, как я могу использовать метод reduce, подобный тому, что я пробовал в своем вопросе.
2. @someuser2491, если ты настроишь ts / js скрипты со всем загрузочным кодом, я, возможно, смогу это исправить. Но tl; dr версия — вы должны 1. Извлеките функцию, которую вы передаете React.useMemo, и назовите ее 2. Выполните рекурсивный вызов внутри функции для обработки вложенных элементов
3. я не знаю, как добавить рекурсивный вызов к элементам обработки.