Get data from array of object in Angular

Question

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?

console.log(files[i]) What is output?

rohithpoya
– rohithpoya

2022-05-05 12:22:57 +00:00
Commented May 5, 2022 at 12:22 — rohithpoya
– rohithpoya, Commented May 5, 2022 at 12:22
console.log(file[i]) return undefine

MD40
– MD40

2022-05-05 12:38:27 +00:00
Commented May 5, 2022 at 12:38 — MD40
– MD40, Commented May 5, 2022 at 12:38

Sebastien Servouze · Accepted Answer · 2022-05-05 12:43:07Z

1

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

answered May 5, 2022 at 12:43

Sebastien Servouze

7785 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

MD40 Over a year ago

Thanks in advance and forkJoin is a good solution for this. But when I call the upload method as same as placed in my code it returns "[]" with data I pushed into fileInfo. When I selected 2 files it return an array like the below in the console. [] = 0: {ms_graph: xxxxxxx, file: File, sessionUrl: 'xxxxxx} 1: {ms_graph: xxxxxxx, file: File, sessionUrl: 'xxxxxx}. Why is that not showing when I Iterate the array. If I am doing wrong how?

Sebastien Servouze Over a year ago

I believed you said console.log(files[i]) returned undefined ?

Sebastien Servouze Over a year ago

So this means the array you passed to the function is empty when you call uploadMultipleFiles. For the same reason I explained :). Yes you will have an array, because you declared it like this fileInfo: file_info[] = [] But it will be empty because your obsevable isn't completed yet when calling uploadMultipleFiles

MD40 Over a year ago

Yes, you are correct and I am into forkJoin. Sorry for asking below. I am new to angular and RxJS. If I use forkJoin option where/how to add it?

Sebastien Servouze Over a year ago

@MD40 you would fill an array of observables, like observablesArray.push(this.ms_graph .get_upload_session(fileType, fileName, this.itemId)) Once you have them in an array, subscribe to the forkJoin of this array. In that subscribe, fill your fileInfo array. When fileInfo array is completely filled, call uploadMultipleFiles

|

rohithpoya · Accepted Answer · 2022-05-05 12:46:55Z

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

Collectives™ on Stack Overflow

Get data from array of object in Angular

2 Answers 2

8 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Related