如何循环遍历对象数组并使用 typescript 创建仅具有某些属性的新对象数组并做出反应？

Question

i have 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 all the polygons from each item and subitem into an array of objects so the expected ouptut is 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 how can i use reduce method to get an array polygons like above from Items array using javascript or typescript. thanks.

EDIT:

i have tried doing something like this but this retrieves only the polygons from Item object but i also want the subItems polygons too.

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;
   }, []);
}

how can i fix this. thanks.

Answer 1

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

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

Answer 2

Here's my solution

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