如何使用Typescript查找遍历对象数组的id并做出反应?

时间:2020-08-18 20:10:22

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

现在从上面的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 个答案:

答案 0 :(得分:1)

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 

答案 1 :(得分:0)

正确的搜索可以这样进行:

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)

答案 2 :(得分:0)

您可以运行嵌套循环,也可以直接访问子项并使用某些子项或过滤器,但是如果您想进行完全递归,则为解释起见,这是一个非常冗长的要点

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