将一个对象数组中的项目作为数组包含在第二个对象数组的每个 object 中（按键）

Question

我正在寻找一种以非常具体的方式合并两个对象 arrays 的方法。 我知道我可以使用映射、集合、展开或简单的 for 循环将 arrays 组合在一起。 但是，我所追求的并不完全是“典型的合并”。

给定以下两个 arrays：

// Array containing the list of cars being assembled in the factory (1 object per vehicle)
carList = [
  {
    vehicleSerialNumber: '123',
    make: 'Ford',
    model: 'Escape'
  },
  {
    vehicleSerialNumber: '456',
    make: 'Honda',
    model: 'Civic'
  },
  {
    vehicleSerialNumber: '999',
    make: 'Tesla',
    model: 'Model S'
  }
]

// Array containing each section for each car (by nature, this array will be much larger
// than the one above since we have many sections to assemble per vehicle (for example :
// wheels, doors, windows, seats, etc.). I only included a few for this example)
assemblyProgress = [
  {
    vehicleSerialNumber: '123',
    section: 'Passenger Door',
    status: 'Completed'
  },
  {
    vehicleSerialNumber: '123',
    section: 'Driver Door',
    status: 'In WIP'
  },
  {
    vehicleSerialNumber: '456',
    section: 'Passenger Door',
    status: 'Not Started'
  },
  {
    vehicleSerialNumber: '456',
    section: 'Driver Door',
    status: 'Not Started'
  },
  {
    vehicleSerialNumber: '789',
    section: 'Driver Door',
    status: 'Completed'
  }
]

请注意，对于“carList”数组中尚不存在的汽车，“carList”数组中可能没有“assemblyProgress”数组中的条目和/或“assemblyProgress”数组中的条目。 只有在“carList”数组中找到的与汽车相关的信息才应该包含在结果数组中。 我想得到类似于“carList”数组的结果，但在每辆车的 object 树中添加一个“assemblyProgress”数组，其中包含来自第二个数组的相应数据。 最终，我想得到的是以下数组：

resultingArray = [
  {
    vehicleSerialNumber: '123',
    make: 'Ford',
    model: 'Escape',
    assemblyProgress: [
      {
        section: 'Passenger Door',
        status: 'Completed'
      },
      {
        section: 'Driver Door',
        status: 'In WIP'
      },
    ]
  },
  {
    vehicleSerialNumber: '456',
    make: 'Honda',
    model: 'Civic',
    assemblyProgress: [
      {
        section: 'Driver Door',
        status: 'Not Started'
      },
      {
        section: 'Driver Door',
        status: 'Not Started'
      },
    ]
  },
  {
    vehicleSerialNumber: '999',
    make: 'Tesla',
    model: 'Model S'
    assemblyStatus: []
  }
]

另请注意，不幸的是，我无法控制阵列的设计/结构，因为它们是从 SQL 服务器中提取的。

到目前为止，我所拥有的是以下内容，但它所做的是为“assemblyProgress”数组的每个条目添加汽车的信息，这不是所需的结果：

const resultingArray = this.assemblyProgress.map(t1 => ({...t1, ...this.carList.find(t2 => t2.vehicleSerialNumber === t1.vehicleSerialNumber)}));

这是与我到目前为止所拥有的相对应的 StackBlitz： https://stackblitz.com/edit/angular-ivy-a9nxav?file=src/app/app.component.ts

任何帮助将不胜感激。 太感谢了

Answer 1

使用 Array.filter()：

 const carList = [ { vehicleSerialNumber: '123', make: 'Ford', model: 'Escape' }, { vehicleSerialNumber: '456', make: 'Honda', model: 'Civic' }, { vehicleSerialNumber: '999', make: 'Tesla', model: 'Model S' } ] // Array containing each section for each car (by nature, this array will be much larger // than the one above since we have many sections to assemble per vehicle (for example: // wheels, doors, windows, seats, etc.). I only included a few for this example) const assemblyProgress = [ { vehicleSerialNumber: '123', section: 'Passenger Door', status: 'Completed' }, { vehicleSerialNumber: '123', section: 'Driver Door', status: 'In WIP' }, { vehicleSerialNumber: '456', section: 'Passenger Door', status: 'Not Started' }, { vehicleSerialNumber: '456', section: 'Driver Door', status: 'Not Started' }, { vehicleSerialNumber: '789', section: 'Driver Door', status: 'Completed' } ] const resultingList = carList.map(car=>({...car,assemblyProgress:assemblyProgress.filter(asm=>asm.vehicleSerialNumber===car.vehicleSerialNumber)})) console.log(resultingList);