将对象合并到具有匹配 ID 的数组 - Angular 2+ / Ionic 2+

Question

我有一个包含对象的数组。在这些对象中的每一个中，都有另一个用于 itemID 的对象。例如

[
{object1: 123, hasObjects: {innerObjectID: 1, type: red}
{object2: 124, hasObjects: {innerObjectID: 2, type: blue}
{object3: 125, hasObjects: {innerObjectID: 2, type: blue}
{object4: 127, hasObjects: {innerObjectID: 1, type: red}
]

hasObjects 是我的内在对象。我有其他对象正在从另一个端点检索，我想根据该 innerObjectID 将该数据组合到这个数组中。这是其他对象的样子——每个对象都是它自己的 api 调用

{ innerObjectID: 1, data: 1231231209381029381 } 
{ innerObjectID: 2, data: 13464531209381029381 }

我想将这些数据合并到上面的数组中。所以我会查看该数组并根据 ID 添加对象。

我想要什么：

[
    {object1: 123, hasObjects: {innerObjectID: 1, type: red, data: 1231231209381029381}
    {object2: 124, hasObjects: {innerObjectID: 2, type: blue, data: 13464531209381029381}
    {object3: 125, hasObjects: {innerObjectID: 2, type: blue, data: 13464531209381029381}
    {object4: 127, hasObjects: {innerObjectID: 1, type: red, data: 1231231209381029381}
    ]

组件.ts

setItems(){

    this.service.setItems().subscribe((res) => {
      this.items = res

      this.stops.map(res => {
        this.getIcons(res.hasObjects)

      })      
    })
  }

    getIcons(iconID){
      this.service.getIcons(iconID.imageID).subscribe(icon => {
            this.newIcons = icon

              icon.data = 'data:image/png;base64,' + icon.data;
              let newObj = Object.assign( iconID.imageID, this.newIcons.innerObjectID)
              console.log(newObj, 'new object')
      })
    }

上面发生的事情是我只是得到结果，无法将该对象添加到相关对象中。

Answer 1

对象的结构有点混乱，但作为一般规则，您可以为数组中的每个对象发送请求。然后你可以使用Promise.all在所有请求返回后执行代码并从那里构建一个新数组。

它可能看起来像这样

const requests = []

objects.map(object => {
  // Assuming this.getOtherObject() returns an observable with an object 
  // with the following signature { innerObjectID: 1, data: 123 } 
  requests.push(this.getOtherObject(object.hasObjects.innerObjectID).toPromise())
})

Promise.all(requests).then(res => {
  const newItems = []

  // res is an array containing all the responses from the requests
  res.map(innerObject => {
    const object = objects.find(
      object => object.hasObjects.innerObjectID === innerObject.innerObjectID
    )

    newItems.push({
       ...object,
       hasObjects: { ...object.hasObjects, data: innerObject.data }
    })
  })

  this.items = newItems
})

我没有测试代码，但希望这能让你知道如何去做。

Answer 2

在 map 函数中使用 Promise 不是一个好主意，因为 map 函数需要一些东西来映射，但是当你向服务器发送请求时，你只有一个 Promise。没有什么可以给地图功能。只需遍历您的数组并发送对所有项目的请求。这段代码应该可以工作：

setItems(){    
    this.service
        .setItems()
        .subscribe((res) => {
           this.items = res;

           this.items.forEach((item, i, arr) => {
             this.getIcons(arr[i]);//here we pass by reference 
           });      
         });
}

 getIcons(item){
      this.service
          .getIcons(item.hasObjects.innerObjectID)//null check here
          .subscribe(icon => {
              item.hasObjects.data = icon.data;
      })
    }