Выполнение вызовов API изнутри forEach для каждого элемента и получение значений в Angular с использованием Observable

Question

Я хочу перебрать массив и сделать последующие вызовы API и отобразить значение, связанное с этими элементами

currentRefValue: any = [];
myArray.droppeditem = [];

somearray.forEach(element => { 
    let objTemp:any = {}

    objtemp.receivedValue = 
    someFunction(element.elementId,element.elementName)

    myArray.droppeditem.push(objTemp);
 })

someFunction(eId,ename){

  let parentObj = this.getExisitingParentObj(eId);

  let parentEquip = parentObj.map(equip => equip.entities.filter(entity => 
  entity.entities.length > 0)[0])[0];

 let ref = this.helperService.getPointId(this.someExisitngObject, 
 ['current', 'desired'], parentEquip.referenceIDs)[0];

 let subs = this.siteService.getPointData(ref, 'current')
                    .pipe(
                        map(this.helperService.stripHaystackTypeMapping),
                    )
                    .subscribe(({ rows }) => {
                        if (rows.length > 0) {
                            this.currentRefValue[ename] = rows[0].val;
                        }
                    });                 
    //someCalculations
    return this.currentRefValue;                    
 }

Последующий вызов API ( this.siteService.getPointData ) ожидает значения от предыдущего вызова API ( this.helperService.getPointId ), а предыдущий ( this.helperService.getPointId ) уже имеет объект parentEquip.Я хочу вызвать someFunction из цикла foreach, так как мне нужно получить currentRefValue каждого элемента

Html

<div *ngFor="let existingItem of myArray.droppeditem">

 <span>existingItem.receivedValue</span>

</div>

Answer 1

Это не возвращает того, что вы думаете:

objtemp.receivedValue = someFunction(element.elementId,element.elementName)

this.currentRefValue всегда возвращается до завершения любого http-запроса.Вместо этого внутри блока подписки отправьте данные в ваш массив.Вот упрощенный пример вашего кода, поскольку мы не знаем, что все, что вы делаете в своем коде, но он должен обрабатываться следующим образом:

this.elements.map(element => {
 // do stuff before http-request
  this.myService.getPointData().pipe(
    map(data => {
      // do stuff with received data and then push to array
      this.myObj.droppedItem.push({ receivedValue: data[0].val });
    })
  ).subscribe();
});

STACKBLIZ

Вы также можете использовать forkJoin для параллельного выполнения всех этих запросов.