Working with Arrays of Objects in Typescript with Angular

Question

Working with Arrays of Objects in Typescript with Angular

I am currently trying to define an array of objects in my Typescript code. However, I am encountering issues when accessing these objects. Below is the snippet of my code along with a screenshot showing the output of this.attachments.

info: Info[];

if (this.attachments.length > 0) {
  this.previewInfo(this.attachments);
}

previewInfo(infos) {
  this.info = [];
  for (let i = 0; i < infos.length; i++) {
    let reader = new FileReader();
    reader.onload = (e: any) => {
      var temp = new Info;
      temp = {
        id: i,
        url: e.target.result,
        message: ""
      }
      this.info.push(temp);
    }
    reader.readAsDataURL(infos[i]);
  }
}

The resulting output displays an empty array at the beginning as follows.

[]0: {id: 0, url: "test1", message: ""}
1: {id: 1, url: "test2", message: ""}
2: {id: 2, url: "test3", message: ""}

This leads to undefined errors when attempting to retrieve them using

this.info[0]

If I exclude the second line which resets this.info=[], I encounter an error message that says

Cannot read property '0' of undefined

Is there an issue with how I declared it? How can I effectively access info by its index?

https://i.sstatic.net/H7E1h.png

angular typescript asynchronous callback

Answer 1

Answer №1

Akber Iqbal's solution is effective, but there is a concern about maintaining the order of files in the attachments array. In order to address this issue:

Here is an alternative solution that ensures the info items are in the same order as the files in the attachments array. This might be crucial if maintaining file order is important. The implementation involves using Promises and async/await:

async onFileSelected(event) {
  this.attachments = [];
  this.info = [];

  for (let index = 0; index < event.target.files.length; index++) {
    let file = event.target.files[index];
    this.attachments.push(file);
  }

  if (this.attachments.length > 0) {
    for (let i = 0; i < this.attachments.length; i++) {
      try {
        // wait that the file has been processed before moving on to next file
        let temp = await this.readFile(this.attachments[i], i);
        this.info.push(temp)

        if (this.attachments.length === this.info.length) {
          // here we have the first item after all files has been completed
          console.log(this.info[0])
        }
      } catch (err) {
        console.log(err);
      }
    }
  }
}

Additionally, the file processing within the for-loop involves passing the file and its index and returning the temporary file:

readFile(file, i) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();

    reader.onload = (e: any) => {
      let temp = {
        id: i,
        url: e.target.result,
        message: file.name, // for testing I put the file name as message
      }
      resolve(temp);
    };
    reader.readAsDataURL(file)
  })
}

DEMO: StackBlitz

Answer 2

Akber Iqbal's solution is effective, but there is a concern about maintaining the order of files in the attachments array. In order to address this issue:

Here is an alternative solution that ensures the info items are in the same order as the files in the attachments array. This might be crucial if maintaining file order is important. The implementation involves using Promises and async/await:

async onFileSelected(event) {
  this.attachments = [];
  this.info = [];

  for (let index = 0; index < event.target.files.length; index++) {
    let file = event.target.files[index];
    this.attachments.push(file);
  }

  if (this.attachments.length > 0) {
    for (let i = 0; i < this.attachments.length; i++) {
      try {
        // wait that the file has been processed before moving on to next file
        let temp = await this.readFile(this.attachments[i], i);
        this.info.push(temp)

        if (this.attachments.length === this.info.length) {
          // here we have the first item after all files has been completed
          console.log(this.info[0])
        }
      } catch (err) {
        console.log(err);
      }
    }
  }
}

Additionally, the file processing within the for-loop involves passing the file and its index and returning the temporary file:

readFile(file, i) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();

    reader.onload = (e: any) => {
      let temp = {
        id: i,
        url: e.target.result,
        message: file.name, // for testing I put the file name as message
      }
      resolve(temp);
    };
    reader.readAsDataURL(file)
  })
}

DEMO: StackBlitz

Answer 3

Answer №2

The issue arises from asynchronous calls in the code;

Once the loop finishes and these 2 lines are executed... at that point, the reader.onload is still ongoing and hence this.info.push(temp); doesn't get executed leading to a blank output in your console when running the following 2 lines:

console.log(this.info);
console.log(this.info[0]); //this is what i need

To resolve this, we should allow the loop to finish and only in the very last iteration (where i == infos.length - 1) of the loop... we display the values on the console to obtain the correct outcome;

relevant TypeScript:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  //Variable declaration
  attachments = [];
  info = [];

  onFileSelected(event) {
    this.attachments = [];
    for (var index = 0; index < event.target.files.length; index++) {
      var file = event.target.files[index];
      this.attachments.push(file);
    }
    if (this.attachments.length > 0) {
      this.previewInfo(this.attachments);
      console.log('caller', this.attachments);
    }
  }

  previewInfo(infos) {
    this.info = [];
    if (infos) {
      for (let i = 0; i < infos.length; i++) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          let temp = {
            id: i,
            url: e.target.result,
            message: "",
          }
          //console.log(temp);
          if (i == infos.length - 1) {
            this.pusher(temp, true);
          } else {
            this.pusher(temp, false);
          }
          //this.info.push(temp, function(){ console.log('pushed'); } );
        }
        reader.readAsDataURL(infos[i]);
      }
      console.log('empty: ', this.info);
      console.log('empty: ', this.info[0]); //this is what i need
    }
  }

  pusher(tempFile, lastFile) {
    this.info.push(tempFile);
    if (lastFile == true) {
      console.log('Correct Filled: ', this.info.length);
      console.log('Correct Filled: ', this.info[0]); //this is what i need
    }
  }

}

view the complete working example on StackBlitz here

Answer 4

The issue arises from asynchronous calls in the code;

Once the loop finishes and these 2 lines are executed... at that point, the reader.onload is still ongoing and hence this.info.push(temp); doesn't get executed leading to a blank output in your console when running the following 2 lines:

console.log(this.info);
console.log(this.info[0]); //this is what i need

To resolve this, we should allow the loop to finish and only in the very last iteration (where i == infos.length - 1) of the loop... we display the values on the console to obtain the correct outcome;

relevant TypeScript:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  //Variable declaration
  attachments = [];
  info = [];

  onFileSelected(event) {
    this.attachments = [];
    for (var index = 0; index < event.target.files.length; index++) {
      var file = event.target.files[index];
      this.attachments.push(file);
    }
    if (this.attachments.length > 0) {
      this.previewInfo(this.attachments);
      console.log('caller', this.attachments);
    }
  }

  previewInfo(infos) {
    this.info = [];
    if (infos) {
      for (let i = 0; i < infos.length; i++) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          let temp = {
            id: i,
            url: e.target.result,
            message: "",
          }
          //console.log(temp);
          if (i == infos.length - 1) {
            this.pusher(temp, true);
          } else {
            this.pusher(temp, false);
          }
          //this.info.push(temp, function(){ console.log('pushed'); } );
        }
        reader.readAsDataURL(infos[i]);
      }
      console.log('empty: ', this.info);
      console.log('empty: ', this.info[0]); //this is what i need
    }
  }

  pusher(tempFile, lastFile) {
    this.info.push(tempFile);
    if (lastFile == true) {
      console.log('Correct Filled: ', this.info.length);
      console.log('Correct Filled: ', this.info[0]); //this is what i need
    }
  }

}

view the complete working example on StackBlitz here

Working with Arrays of Objects in Typescript with Angular

Answer №1

Answer №2

Similar questions

Dealing with numerous dynamically generated tables while incorporating sorting in Angular: a comprehensive guide

What steps should I take to retrieve my information from a typescript callback function?

Having trouble with React npm start: 'No chokidar version found' error occurring

A collection of JSON data containing various diverse values

Unable to execute karma test cases as a result of ngOnDestroy being inaccessible

Gain access to TypeScript headers by typing the request (req) object

What is the best way to compress a file for transfer to a server using gzip?

Adjusting a variable's value based on the changes of another variable

The factory class is responsible for generating objects without specifying their type

The icon for the ng-bootstrap datepicker calendar is not showing up

What causes the function endpoint to become unreachable when a throw is used?

Obtain a string of characters from different words

Navigating Errors within Express Class Using Typescript

How can I send a value to an Angular element web component by clicking a button with JavaScript?

Leveraging CSS attribute selectors within JSX using TypeScript

encountering an issue during the installation of a node package

Display JSON element in Angular only once

Is there a more efficient solution for incorporating undefined and null into a type apart from developing a custom generic function?

How can I get video playback in IOS to work with Videogular2 using HLS?

The parameter type must be a string, but the argument can be a string, an array of strings, a ParsedQs object, or an array of ParsedQs objects