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

时间:2017-09-28 21:40:17

标签: angular ionic-framework ionic2 ionic3

我有一个包含对象的数组。在每个对象中,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}
    ]

Component.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')
      })
    }

上面发生的是我只是得到结果而无法在相关对象中添加该对象。

2 个答案:

答案 0 :(得分:0)

对象的结构有点令人困惑,但作为一般规则,您可以为数组中的每个对象发送请求。然后,您可以在所有请求返回后使用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
})

我没有测试代码,但希望这可以让你知道如何做到这一点。

答案 1 :(得分:0)

在map函数中使用promises并不是一个好主意,因为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;
      })
    }