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

Question

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

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

例子:

文件列表{0:文件，1:文件，长度:2}0:文件{名称:“demoform1.pdf”，lastModified:1565685422300，lastModifiedDate:2019 年 8 月 13 日星期二 14:07:02 GMT+0530(印度标准时间)，webkitRelativePath:“”，大小:20061，...}1:文件{名称:“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});