What is the proper procedure for invoking a delete method to remove all occurrences of a specific index?

Question

What is the proper procedure for invoking a delete method to remove all occurrences of a specific index?

I have implemented a file deletion method in my Ionic 4 App. Using the deleteFile() method, I can successfully delete individual files. However, when attempting to delete multiple files using a forEach loop, the process fails after the first deletion.

HTML

<ion-card *ngFor="let data of list; let i = index">
  <ion-card-content>
    <div>
      <div *ngFor="let n of loop; let n = index">
        <div class="linkButtons">
          <ion-button fill="outline" color="blackgreen" (click)="DeleteAllFiles()">delete all Photos</ion-button>> 
        </div>
      </div>
    </div> 

    <div>
      <ion-list>
        <ion-item *ngFor="let doc of documents; index as pos" class="ion-text-wrap">
          <ion-icon name="document" slot="start"></ion-icon>
          <ion-textarea auto-grow="true"><small>{{ doc.name }}</small></ion-textarea>
          <ion-button slot="end" fill="clear" (click)="deleteFile(doc, pos)">
            <ion-icon slot="icon-only" name="trash"></ion-icon>
          </ion-button>
        </ion-item>
      </ion-list>
    </div>
  </ion-card-content>
</ion-card>

The usage of (click)="deleteFile(doc, pos) works correctly.

However, (click)="DeleteAllFiles() fails after the first deletion.

TypeScript

DeleteAllFiles(): void {
  this.documents.forEach(
    (imgEntry, position ) => this.deleteFile(imgEntry, position));
}

deleteFile(imgEntry, position) {
  this.documents.splice(position, 1);
  this.storage.get('app_DOCS').then(documents => {
    let arr = JSON.parse(documents);

    let filtered = arr.filter(name => name != imgEntry.name);

    this.storage.set('app_DOCS', JSON.stringify(filtered));
    let correctPath = imgEntry.filePath.substr(0, imgEntry.filePath.lastIndexOf('/') + 1);

    this.file.removeFile(correctPath, imgEntry.name).then(res => {
      this.presentToast('File removed.');
    }); 
  }); 
}

Console Logs

List of Documents

Documents [
 {
   "name":"UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_icon-144x144.png",
   "path":"ionic://localhost/_app_file_/var/mobile/Containers/Data/Application/F8772763-A219-407D-92CD-EF5178F0EA9C/Library/NoCloud/UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_icon-144x144.png",
   "filePath":"file:///var/mobile/Containers/Data/Application/F8772763-A219-407D-92CD-EF5178F0EA9C/Library/NoCloud/UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_icon-144x144.png"
 },
 {
   "name":"UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_44198511-How-to-Fix-FAL-Rifle-Brass-Strikes.pdf",
   "path":"ionic://localhost/_app_file_/var/mobile/Containers/Data/Application/F8772763-A219-407D-92CD-EF5178F0EA9C/Library/NoCloud/UUID_5deb6fae-4d84-41ac-8157-01f9c68e73c5_answerID_155_originalName_44198511-How-to-Fix-FAL-Rifle-Brass-Stri...
]

Working Code

deleteFile(imgEntry, position): Promise<any> {
  console.log("deleteFile selected");
  let request = this.storage.get(this.STORAGE_KEY_DOC);
  console.log("position", position);
  request.then(documents => {
    let arr = JSON.parse(documents);

    this.documents.splice(position);

    let correctPath = imgEntry.filePath.substr(0, imgEntry.filePath.lastIndexOf('/') + 1);

    this.file.removeFile(correctPath,  imgEntry.name).then(res => {
      let resp = JSON.stringify(res);
      console.log("resp", resp);
    });

    let removeDB = this.storage.set(this.STORAGE_KEY_DOC, JSON.stringify(this.documents));
  }).then(() => {
  });
  return request;
}

typescript ionic4

Answer 1

Answer №1

Your code is "failing" because you are modifying the documents array while iterating through it.

Here's what your code essentially does:

var arr = [1, 2, 3, 4];
arr.forEach((v, i) => {
  arr.splice(i, 1);
})
console.log(arr);

Which can be simplified to:

var arr = [1, 2, 3, 4];
arr.splice(0, 1);
arr.splice(1, 1);
arr.splice(2, 1);
arr.splice(3, 1);
console.log(arr);

If the start index provided in splice is greater than the length of the array, no elements will be deleted but instead added as many times as item[n] was provided.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

In conclusion, splicing the array during iteration is unnecessary. Instead, track successfully deleted files within a .then implementation and splice them after the .forEach loop completes. Return the promise from the deleteFile method for optimal use with Promise.all().

The revised example below demonstrates returning promises from the deleteFile method. The deleteAll method now uses map instead of forEach to collect all promises before wiping the documents array once they complete. Note: Below code is updated without compilation so syntax errors may exist.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

DeleteAllFiles(): void {
  var deleteRequests = this.documents.map((imgEntry, position ) => this.deleteFile(imgEntry, position ));

  Promise.all(deleteRequests).then(() => {
      this.documents = new Array();
  });
}

deleteFile(imgEntry, position): Promise<any> {
  var request = this.storage.get('app_DOCS');

  request.then(documents => {
    let arr = JSON.parse(documents);
    console.log("arr ", arr );

    let filtered = arr.filter(name => name != imgEntry.name);
    console.log("filtered", filtered);

    this.storage.set('app_DOCS', JSON.stringify(filtered));
    let correctPath = imgEntry.filePath.substr(0, imgEntry.filePath.lastIndexOf('/') + 1);
    console.log("correctPath", correctPath);

    this.file.removeFile(correctPath, imgEntry.name).then(res => {
      this.presentToast('File removed.'); // edit later for one toast pop up
      }); 
  }); 

  return request;
}

Answer 2

Your code is "failing" because you are modifying the documents array while iterating through it.

Here's what your code essentially does:

var arr = [1, 2, 3, 4];
arr.forEach((v, i) => {
  arr.splice(i, 1);
})
console.log(arr);

Which can be simplified to:

var arr = [1, 2, 3, 4];
arr.splice(0, 1);
arr.splice(1, 1);
arr.splice(2, 1);
arr.splice(3, 1);
console.log(arr);

If the start index provided in splice is greater than the length of the array, no elements will be deleted but instead added as many times as item[n] was provided.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

In conclusion, splicing the array during iteration is unnecessary. Instead, track successfully deleted files within a .then implementation and splice them after the .forEach loop completes. Return the promise from the deleteFile method for optimal use with Promise.all().

The revised example below demonstrates returning promises from the deleteFile method. The deleteAll method now uses map instead of forEach to collect all promises before wiping the documents array once they complete. Note: Below code is updated without compilation so syntax errors may exist.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

DeleteAllFiles(): void {
  var deleteRequests = this.documents.map((imgEntry, position ) => this.deleteFile(imgEntry, position ));

  Promise.all(deleteRequests).then(() => {
      this.documents = new Array();
  });
}

deleteFile(imgEntry, position): Promise<any> {
  var request = this.storage.get('app_DOCS');

  request.then(documents => {
    let arr = JSON.parse(documents);
    console.log("arr ", arr );

    let filtered = arr.filter(name => name != imgEntry.name);
    console.log("filtered", filtered);

    this.storage.set('app_DOCS', JSON.stringify(filtered));
    let correctPath = imgEntry.filePath.substr(0, imgEntry.filePath.lastIndexOf('/') + 1);
    console.log("correctPath", correctPath);

    this.file.removeFile(correctPath, imgEntry.name).then(res => {
      this.presentToast('File removed.'); // edit later for one toast pop up
      }); 
  }); 

  return request;
}

What is the proper procedure for invoking a delete method to remove all occurrences of a specific index?

Answer №1

Similar questions

Unique validation for mandatory selection on changeSelected

Neither Output nor EventEmitter are transmitting data

Is it possible to modify the number format of an input field while in Antd's table-row-edit mode?

I must connect a TypeScript class to an Angular component

Testing a NestJS service with multiple constructor parameters can be done by utilizing various techniques such as dependency

Unexpected behavior in resolving modules with Babel (using node and typescript)

Issue with calling a function to change the CSS color class of a button in Angular

Managing the re-rendering in React

Retrieving a variable value set within a jQuery function from within an Angular 2 component

Out-of-order calling of React hooks detected

Alternative for using useRouteMatch to retrieve parameters

Categorizing the types of dynamically retrieved object values

Issue with typing in subscription encountered in Typescript RXjs version 6.6.0

Using Generic Types in TypeScript for Conditional Logic

Utilizing TypeScript to mandate properties in a React component

Incorporating responsive design with React and Typescript

Adding a cell break line within AG-GRID in an Angular application

Switching to Next.js

Employing Class Categories in Static Procedures

Tips for incorporating the closeAutocomplete function into ng4-geoautocomplete