如何遍历 API 响应并将响应值分配给角度 8 中的嵌套数组

Question

我试图在一个循环中多次调用 API，在响应中，我将项目 id 分配回数组，但 m 的值在运行第二个循环之前已经增加，这会引发错误 TypeError: Cannot读取未定义的属性“imagesnamearray”。

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++;

}

Answer 1

问题在于m 是一个全局变量，而您的回调（subscribe 的参数）是异步执行的。

您的代码首先创建了大量 HTTP 请求，在此过程中增加了 m 和 n。有时稍后，HTTP 请求完成并调用您的回调。到那时，m 不再具有您启动请求时的值。

我会重写你的代码如下。我还用Array.forEach 替换了您的for 循环。

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