Как перебрать ответ API и присвоить значение ответа вложенному массиву в angular 8

Я пытаюсь вызвать API несколько раз в цикле, и в ответ я возвращаю идентификатор проекта обратно в массив, но значение m увеличивалось уже перед запуском второго цикла, и это вызывает ошибку TypeError: Cannot read property ' imagesnamearray 'из undefined.

var  m = 0;
for (var j=0 ; j<this.imagesdataarray.length;j++){
  var n=0;
  for (var i=0;i<this.imagesdataarray[j].imagesnamearray.length;i++){
    const fd = new FormData();
    fd.append('userID',this.userid );
    fd.append('projectID', this.imagesdataarray[j].projectid);
    fd.append('id',this.imagesdataarray[j].imagesnamearray[i].imageid);
    fd.append('formFiles', this.imagesdataarray[j].imagesnamearray[i].image );

    this.http.post('http://api.interiordesigns2020.com/api/services/app/ImageProject/CreateProjectImages',fd)
    .subscribe(async (res) => {
      this.data=res;
      this.imagesdataarray[m].imagesnamearray[n].imageid=this.data.result; 
      n++;
    });
    
  }
  m++;

}

http typescript angular typescript-generics
person Mohsin Zia    schedule 09.03.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема в том, что m - это глобальная переменная, и ваш обратный вызов (аргумент для subscribe) выполняется асинхронно.

Ваш код сначала создает множество HTTP-запросов, увеличивая m и n в процессе. Иногда позже HTTP-запросы завершаются и вызывается ваш обратный вызов. К этому времени m уже не имеет значения, которое было при запуске запроса.

Я бы переписал ваш код следующим образом. Я также заменил ваш for цикл на Array.forEach.

this.imagesdataarray.forEach(imagedata => {
  imagedata.imagesnamearray.forEach(imagename => {
    const fd = new FormData();
    fd.append('userID', this.userid );
    fd.append('projectID', imagedata.projectid);
    fd.append('id', imagename.imageid);
    fd.append('formFiles', imagename.image);

    this.http
      .post('http://api.interiordesigns2020.com/api/services/app/ImageProject/CreateProjectImages', fd)
      .subscribe(data => {
        imagename.imageid = data.result; 
      });
  })
});
person rveerd    schedule 09.03.2021
comment
спасибо за вашу помощь, но у меня все еще есть одна проблема: HTTP-запрос все еще не дожидается ответа API, идентификатор изображения, назначенный имени изображения, неверен. - person Mohsin Zia; 10.03.2021
comment
Вы имеете в виду, что хотите дождаться завершения всех HTTP-запросов? Это требует другой настройки. Взгляните на forkJoin. - person rveerd; 10.03.2021