Как протолкнуть объект в массиве в один массив объектов, используя TeampScript и реагируйте? -- reactjs поле с участием typescript пол Связанный проблема

How to push the object in array into one array of objects using typescript and react?


-1
vote

проблема

русский

У меня есть данные, как приведенные ниже,

 <код> 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',              }          ],      },  ]   

Теперь вопрос в том, как я могу положить многоугольники как из элемента, так и подпункты в массив объектов.

Я пробовал что-то вроде ниже, которое поставит только многоугольники из элемента.

 <код> const polygons = React.useMemo(() => {     return Items.reduce((acc: Something[], Item) => {         (Item.polygons || []).forEach(polygon => {             acc.push({ ...polygon, color: Item.color });         });         return acc;     }, []); }, [Items]);   

Вот что-то [] имеет тип, как ниже

 <код> export interface Polygon {     id: string;     coordinate: Coordinate[];     item: Item; }  export interface Something extends Polygon {     color: string; }   

Приведенный выше код получает Polygons только формировать элемент, но также должен получить многоугольники из каждой подпунктности в элементе.

Как я могу сделать это, используя TypeScript и реагировать. Может ли кто-нибудь помочь мне с этим. спасибо.

Английский оригинал

i have the data like below,

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',                            }                        ],                    }                ]            }        ],    } 

]

Now i want to get the polygons for both the Item and subitem along with color for Item and subItem and put it in array like below,

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',              }          ],      },  ] 

Now the question is how do i put the polygons from both the Item and subItems into an array of objects.

i have tried something like below which will put only polygons from Item.

const polygons = React.useMemo(() => {     return Items.reduce((acc: Something[], Item) => {         (Item.polygons || []).forEach(polygon => {             acc.push({ ...polygon, color: Item.color });         });         return acc;     }, []); }, [Items]); 

here Something[] is of type like below

export interface Polygon {     id: string;     coordinate: Coordinate[];     item: Item; }  export interface Something extends Polygon {     color: string; } 

the above code gets polygons only form Item but should also get polygons from each subItem in Item.

how can i do it using typescript and react. could someone help me with this. thanks.

</div
     

Список ответов

0
 
vote
<Р> Я добавил недостающие запятые в данных образцов и вот как вы можете это сделать. Это, вероятно, может быть оптимизировано в некотором роде. Я также не включен типов машинописи. Я также картирование подразделов с предположением, что может быть более одного подэлемента, но если это только один, то вы можете просто использовать индекс 0 вместо.
 <код> Django==1.10.5 django-crispy-forms==1.6.1 django-registration-redux==1.4 djangorestframework==3.5.3 olefile==0.44 packaging==16.8 Pillow==4.0.0 psycopg2==2.6.2 0  
 

I added the missing commas in your sample data and here's how you can do it. It can probably be optimized in some way. I've also not included the typescript types. I'm also mapping the subitems with the assumption that there can be more than one subitem but if it's just one then you can just use index 0 instead.

    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 newItems = items.map(item=> {          let subItems = item.subItems;          const transformedSubitems = subItems.map(subItem=> {            const newSubItem = {};            newSubItem['id'] = subItem.polygons[0].id            newSubItem['color'] = subItem.color            newSubItem['coordinates'] = subItem.polygons[0].coordinates            return newSubItem;          })          item.coordinates = item.polygons[0].coordinates;          item.id = item.polygons[0].id;          delete item.subItems;          delete item.name;          delete item.polygons;          return [item, ...transformedSubitems]        })             const flattenedArray = newItems.flat()             console.log(JSON.stringify(flattenedArray, null, 2)) 
</div
 
 
0
 
vote
<Р> Привет вам нужно отобразить и нажимные элементы в новый массив, это рабочий пример

Это код,

 <код> Django==1.10.5 django-crispy-forms==1.6.1 django-registration-redux==1.4 djangorestframework==3.5.3 olefile==0.44 packaging==16.8 Pillow==4.0.0 psycopg2==2.6.2 1  
 

Hi you have to map and push items to a new array, this is a working example

this is the code,

let polygons = []; items.map(i =>{   polygons.push(     {       id:i.id,       color: i.color,       coordinates: i.polygons[0].coordinates     }   )   polygons.push(     {       id:i.subItems[0].id,       color: i.subItems[0].color,       coordinates: i.subItems[0].polygons[0].coordinates     }   ) }); 
</div
 
 

Связанный проблема

7  ract.js and carousel со стрелками  ( React js antd carousel with arrows ) 
Я смотрю на использование and Caroseul, но я не видел пример, который создает кнопку предыдущего / следующей или паузы. <код> const { Carousel } = antd; Re...

0  Установка динамического базового пути в React Router DOM  ( Setting dynamic base path in react router dom ) 
Я работаю над приложением React, где / Content идет на страницу контента и / Настройки Перейти к странице настроек. Теперь я должен добавить базовый путь как ...

0  Не могу использовать Jestjs в Windows 7 64 бита  ( Cant use jestjs in windows 7 64 bits ) 
Я хочу использовать jest для удаления тестирования приложения React. Я последовал за этим руководством, Я запускаю Python 2.7.10, используя Visual Studio 2...

1  Как изменить цвет надувателя на офисной ткани UI NAV компонент  ( How to change the hover colour on office fabric ui nav component ) 
У меня есть компонент NAV в моем приложении React React, и я пытаюсь изменить цвет фона каждого элемента на Hover. Пока у меня есть - <код> styles={{ link...

0  Как закрыть Menuitem, когда диалог открыт  ( How to close menuitem when dialog is open ) 
Я открываю calling диалог из меню. Проблема в том, что меню будет оставаться открытым. Как я могу убедиться, что меню будет закрыто одновременно при нажати...

0  Нужен React Router Pro, чтобы помочь мне  ( Need a react router pro to help me ) 
Итак, сегодня я играл с маршрутизатором RACT и попытался изменить это Пример . Я хочу достичь этого: . Боковой NAV отображает только имена Когда пол...

5  Пользовательский стиль на раскрывающемся меню React-Buttrap  ( Custom style on react bootstraps dropdown menu component ) 
Я пытаюсь применить пользовательский стиль CSS к компоненту RACH BETSTRAP, но не может понять, как получить доступ к элементам, которые не являются явными в J...

3  Как реализовать автономный компонент в React Redux?  ( How to implement a self contained component in react redux ) 
Я создаю базу файлового менеджера Webui основы на React Redux (моя цель - это управлять React и Redux через этот проект) Как вы знаете, файловый менеджер ну...

0  Реагировать |. Onchange распространяется на родительский элемент OnClick  ( React onchange is propagating to onclick parent element ) 
Я работаю над небольшим проектом, и я со странной проблемой! Принципиально у меня есть некоторые компоненты, составляющие элемент, и у меня есть один элемент ...

0  Как пройти значение из изображения Carousel в React JS  ( How to pass value from carousel image in react js ) 
Я изучаю js js и пытаюсь создать связываемое изображение карусели с использованием nuka-carousel. Я настроил файл данных, чтобы получить изображения и данные ...

2  React Redux сгенерировал компоненты без природных компонентов  ( React redux generated stateless components perfomance ) 
Я изучаю redux и реагирую. И я решил запустить простую «стресс-тест» с дающим, скажем, 15K ряды сгенерированного компонента (я надеюсь, что сделал это правиль...

0  REVENTJS - Есть ли способ иметь «местную» версию Package.json?  ( Reactjs is there a way to have a local version of package json ) 
Я хотел бы иметь несколько разных фирменных версий моего приложения React. По сути, я хочу иметь несколько «демонстрационных» версий, каждый с другим логотипо...

-1  Сортировка реагирования - родной складки алфабатично  ( Sorting react native flatlist alphabatically ) 
Это массив, из которого плоский LIS получает данные <код> const DATA = [ { id: '1', name: 'Hamza Ahzam', phone: '03076232309', DOB: '05/07/96', }, {...

1  Столбец Tabulator с JSX - выполнение функций класса  ( Tabulator column with jsx executing class functions ) 
Я пытаюсь использовать React-Tabulator, но у меня проблемы с рендером функции внутри моих столбцов таблицы. Функция возвращает JSX, но она использует другие к...

0  Добавление к компоненту из другого компонента с использованием реагирования  ( Adding to component from another component using react ) 
У меня есть <код> footer , который я создал в <код> App.js и теперь у меня другой компонент называется <код> KokPlayer.js , и я хочу добавить кнопки из <код ...

Связанный проблема

7  ract.js and carousel со стрелками 
0  Установка динамического базового пути в React Router DOM 
0  Не могу использовать Jestjs в Windows 7 64 бита 
1  Как изменить цвет надувателя на офисной ткани UI NAV компонент 
0  Как закрыть Menuitem, когда диалог открыт 
0  Нужен React Router Pro, чтобы помочь мне 
5  Пользовательский стиль на раскрывающемся меню React-Buttrap 
3  Как реализовать автономный компонент в React Redux? 
0  Реагировать |. Onchange распространяется на родительский элемент OnClick 
0  Как пройти значение из изображения Carousel в React JS 
2  React Redux сгенерировал компоненты без природных компонентов 
0  REVENTJS - Есть ли способ иметь «местную» версию Package.json? 
-1  Сортировка реагирования - родной складки алфабатично 
1  Столбец Tabulator с JSX - выполнение функций класса 
0  Добавление к компоненту из другого компонента с использованием реагирования