Get data from array of object in Angular-CodePudding

I have an array of objects in my angular app and I am trying to read data in objects with "for loop" and I got nothing in the console. Here are the model and other details how I created the array object.

file_info.model.ts

import { MSGraphService } from './../ms-graph.service';
export interface file_info {
  ms_graph: MSGraphService;
  file: any;
  sessionUrl: string;
}

upload.component.ts

import { file_info } from 'src/app/models/file_info.model';
...
export class UploadFileComponent implements OnInit {
  files: File[];
  fileInfo: file_info[] = [];
...
async uploadFile(files: File[]) {
    for (const file of files) {
    .....
      this.ms_graph
        .get_upload_session(fileType, fileName, this.itemId)
        .subscribe(
          async (response: MSCreateUploadSession) => {
            console.log(JSON.stringify(response));
            // this.progressText = "Session created.";
            this.sessionUploadURL = response.uploadUrl;

            let uploadData = {
              ms_graph: this.ms_graph,
              file: file,
              sessionUrl: this.sessionUploadURL,
            };

            this.fileInfo.push(uploadData);
          },
          (error) => {
            console.error(
              'Error get_upload_session() \n'   JSON.stringify(error)
            );
            throw error;
          }
        );
    }
    this.uploadMultipleFiles(this.fileInfo);
  }

Now I trying to read data from "this.fileInfo"

  uploadMultipleFiles(files: file_info[]) {
    console.log(files);
    // for(let fileInfo of files) {
    //   console.log(fileInfo);
    // }

    // files.forEach(element => {
    //   console.log(element.file);
    // });

    for(var i=0; i<=files.length; i  ) {
      console.log(files[i].file);
    }
  }

I tried several loop methods to extract the data from fileInfo object and nothing returned in the console. when I console the files, it returns an array in the console. Can anyone tell me how to get the uploadData variable data from fileInfo array iteration?

CodePudding user response：

This is because

this.uploadMultipleFiles(this.fileInfo);

is called before

this.fileInfo.push(uploadData);

Due to being called in your subscription method.

Solution

You have to wait for all of your observables to fill the fileInfo array before using your upload method :)

You can wait for multiple observables to complete with forkJoin

CodePudding user response：

You can use like below, You need to call the function inside the subscribe section.

import { file_info } from 'src/app/models/file_info.model';
...
export class UploadFileComponent implements OnInit {
  files: File[];
  fileInfo: file_info[] = [];
...
async uploadFile(files: File[]) {
    for (const file of files) {
    .....
      this.ms_graph
        .get_upload_session(fileType, fileName, this.itemId)
        .subscribe(
          async (response: MSCreateUploadSession) => {
            console.log(JSON.stringify(response));
            // this.progressText = "Session created.";
            this.sessionUploadURL = response.uploadUrl;

            let uploadData = {
              ms_graph: this.ms_graph,
              file: file,
              sessionUrl: this.sessionUploadURL,
            };

            this.fileInfo.push(uploadData);
            // Call from here
            this.uploadMultipleFiles(this.fileInfo);

          },
          (error) => {
            console.error(
              'Error get_upload_session() \n'   JSON.stringify(error)
            );
            throw error;
          }
        );
    }
    // Here is the problem
    //this.uploadMultipleFiles(this.fileInfo);
  }