在 AJAX 调用成功响应时将数据推送到数组中会导致多次附加最后一个数据

Question

我正在尝试在文件上传成功响应时将数据附加到数组中。在循环控制台内给出了正确的输出，但结果数组由复制数据组成（最后的数据重复 n 次）

 data : consists of multiple file data that has to be uploaded

示例：

文件列表{0：文件，1：文件，长度：2} 0：文件{name："demoform1.pdf"，lastModified：1565685422300，lastModifiedDate：2019 年 8 月 13 日星期二 14:07:02 GMT+0530（印度标准时间），webkitRelativePath：“”，大小：20061，...} 1：文件{name："dummy.pdf"，lastModified：1565260694049，lastModifiedDate：2019 年 8 月 8 日星期四 16:08:14 GMT+0530（印度标准时间），webkitRelativePath：“”，大小：13264，...} 长度：2

方法：

 uploadToServer(data) {
for ( let i = 0 ; i < data.length ; i++ ) {

  const fileType = this.fileValidations.getFileExtension(data[i].name);
  const filetype = {file_type : fileType};
  const data1 = {file : data[i]};
  let uploadFormData;
  uploadFormData = (Object as any).assign({}, data1, filetype);

  this.fileUploadService.uploadFile(uploadFormData).subscribe(res => {
    this.documentCount = this.documentCount + 1;

    const currentFileName = data[i].name;
    this.documentDetailsObj.name = res.original_name;
    this.documentDetailsObj.id = res.id;
    this.documentNameArr.push((this.documentDetailsObj));


    console.log(this.documentNameArr);

    // Expected output : 
    // 0: {name: "pdf1.pdf", id: 1}
    // 1: {name: "pdf2.pdf", id: 2}

    // Current Output :
    // 0: {name: "pdf2.pdf", id: 2}
    // 1: {name: "pdf2.pdf", id: 2}





  }, error => {
    console.log('error');
  });
}

}

Answer 1

此处您将在下一次迭代中传递对象，同一对象通过引用传递进行更新。

this.documentDetailsObj.name = res.original_name;
this.documentDetailsObj.id = res.id;
this.documentNameArr.push((this.documentDetailsObj));

您可以只创建一个对象并将其推送到一行中，不需要额外的变量

this.documentNameArr.push({name: res.original_name, id: res.id});

在 AJAX 调用成功响应时将数据推送到数组中会导致多次附加最后一个数据

Pushing the data in an array on success response of an AJAX call leads to appending the last data multiple times

javascript

arrays

response

angular