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

Question

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.

Answer 1

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))

Answer 2

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
    }
  )
});