如何使用typescript找到循环遍历对象数组的 id 并做出react？

IT技术 javascript reactjs typescript
2021-05-09 06:53:05

我有如下数据，

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

现在从上面的 Items 数组，我想找到 ID 为“2”的子项的索引。

我试过类似下面的东西，

const siIndex = Items.forEach(
    (item: any) =>
        item.subItems ?
            item.subItems.findIndex((subItem:any) => subItem.id === '2');//error here
    );

但这给了我解析错误“：”预期

如何从 Items 数组中找到 id = '2' 的子项的索引。有人可以帮我解决这个问题吗？

我不确定如何遍历 Items 数组并找到 ID 为“2”的 subItem 的索引。谢谢。

3个回答
a.findIndex(b => b.subItem.id ===2)

尝试上述解决方案。这是您正在使用的列表

但我有一个解决方案/例子

你有一些结构像 const a = [{id:'some1', subItem:{ id:1}},{id:'some2', subItem:{ id:2}}]

下面将返回 ID === 2 的子项的索引

a.findIndex(b => b.subItem.id === 2);

const a = [{id:'some1', subItem:{ id:1}},{id:'some2', subItem:{ id:2}}]

//Below will return index for subItem with ID === 2
a.findIndex(b => b.subItem.id === 2);

to get both indexes

const matchedItemIndex    = a.findIndex(b => b.subItem.id === 2);// return matched itemIndex
const matchedItem    = a.find(b => b.subItem.id === 2);
const matchedSubItemIndex   = a[matchedItemIndex].findIndex(b => b.id === matchedItem.id);// return mamtching subItemIndex

正确的搜索可以这样完成：

items.findIndex((item) => item.subItems.some((sub) => sub.id == '2'))

例子：

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 itemIndex = items.findIndex((item) => item.subItems.some((sub) => sub.id == '2'));

console.log('Item index with subItems with id=2 is:', itemIndex)

您可以运行嵌套循环，或者您可以直接访问子项并使用 some 或 filter 但如果您想要完全递归，这里有一个相当冗长的要点，以便于解释

const iterate = (obj) => {
  // loop through object properties
  Object.entries(obj).forEach(([key, value]) => {
    if (obj.hasOwnProperty(key)) {
      // do something with the current iteration
      
      if (typeof value === 'object') {
        // if the property value is an object then iterate into that object
        iterate(value)
      }
    }
  });
};

iterate(items);
其它你可能感兴趣的问题
上一篇调平床时正确施加在纸上的力 下一篇弯道上的马林鱼加速问题