IDが一致するオブジェクトと配列のマージ - 角2+ /イオン2+

Question

オブジェクトを持つ配列があります。これらの各オブジェクトには、itemID内に別のオブジェクトがあります。たとえば、

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

以上何が起こっているが、私はちょうど、相関オブジェクト内のそのオブジェクトを追加することができ、結果を取得していないよです。

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

地図機能には約束が必要なので、地図機能にはマッピングが必要なのでお勧めできませんが、サーバにリクエストを送信すると、約束しかできません。マップ機能を与えるものは何もありません。あなたの配列を横断してあなたのすべてのアイテムをリクエストしてください。このコードは正常に動作するはずです：

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