What is the best way to sort through an Array of photo filenames?

Question

What is the best way to sort through an Array of photo filenames?

https://i.sstatic.net/04cws.pngI have a list of image names that contain UUIDs.

images

[
 "auditid_626_UUID_666666_time__1582577405550.jpg",
 "auditid_626_UUID_999999_time__1582577405554.jpg",
 "auditid_626_UUID_999999_time__1582577405557.jpg"
]

These images are being displayed on an HTML page using the following code:

<ion-list>
  <ion-item *ngFor="let img of images; index as pos" class="ion-text-wrap">
    <ion-thumbnail slot="start">
      <ion-img [src]="img.path"></ion-img>
    </ion-thumbnail>

    <ion-textarea auto-grow="true">{{ img.name }}</ion-textarea>
    <ion-button slot="end" fill="clear" (click)="startUpload(img)">
        <ion-icon slot="icon-only" src="assets/upload.svg"></ion-icon>
      </ion-button>
    <ion-button slot="end" fill="clear" (click)="deleteImage(img, pos)">
      <ion-icon slot="icon-only" name="trash"></ion-icon>
    </ion-button>
  </ion-item>
</ion-list>

The method used to fetch and filter this array is shown below:

ngOnInit() {
  this.testID = "666666";
}

loadStoredImages() {
  this.storage.get(this.STORAGE_KEY).then(images => {
    if (images) {
      let arr = JSON.parse(images);
      this.images = [];  
      for (let img of arr) {
        let filePath = this.file.dataDirectory + img;
        let resPath = this.pathForImage(filePath);
        this.images.push({ name: img, path: resPath, filePath: filePath });
      }
    }
  });
}

The goal is to filter the array to only include the UUIDs that match

this.testID = "666666";

. Assistance is needed on applying this filter. Thank you!

image from xcode log

angular typescript ionic4

Answer 1

Answer №1

const filteredArray = originalArray.filter(item => item.name.includes('UUID_' + this.testID));

Link to live example on StackBlitz

Note the structure of the array - objects are formatted like:

{name: 'auditid_626_UUID_666666_time__1582577405550.jpg'}

Answer 2

const filteredArray = originalArray.filter(item => item.name.includes('UUID_' + this.testID));

Link to live example on StackBlitz

Note the structure of the array - objects are formatted like:

{name: 'auditid_626_UUID_666666_time__1582577405550.jpg'}

Answer 3

Answer №2

Make sure your list follows this format:

let myList = [
 "auditid_626_UUID_666666_time__1582577405550.jpg",
 "auditid_626_UUID_999999_time__1582577405554.jpg",
 "auditid_626_UUID_999999_time__1582577405557.jpg"
];

Next, give this a try:

loadStoredImages() {
  this.storage.get(this.STORAGE_KEY).then(images => {
    if (images) {
      let array = JSON.parse(images);
      this.images = this.images.filter(a => a.includes("UUID_" + this.testID));
      for (let image of array){
        let filePath = this.file.dataDirectory + image;
        let resPath = this.pathForImage(filePath);
        this.images.push({ name: image, path: resPath, filePath: filePath});
      }
    }
  });
}

Here's an example to illustrate:

let myList = ["auditid_626_UUID_666666_time__1582577405550.jpg",
 "auditid_626_UUID_999999_time__1582577405554.jpg",
 "auditid_626_UUID_999999_time__1582577405557.jpg"
];
const result = myList.filter(a => a.includes("UUID_666666"));
console.log(result);

Answer 4

Make sure your list follows this format:

let myList = [
 "auditid_626_UUID_666666_time__1582577405550.jpg",
 "auditid_626_UUID_999999_time__1582577405554.jpg",
 "auditid_626_UUID_999999_time__1582577405557.jpg"
];

Next, give this a try:

loadStoredImages() {
  this.storage.get(this.STORAGE_KEY).then(images => {
    if (images) {
      let array = JSON.parse(images);
      this.images = this.images.filter(a => a.includes("UUID_" + this.testID));
      for (let image of array){
        let filePath = this.file.dataDirectory + image;
        let resPath = this.pathForImage(filePath);
        this.images.push({ name: image, path: resPath, filePath: filePath});
      }
    }
  });
}

Here's an example to illustrate:

let myList = ["auditid_626_UUID_666666_time__1582577405550.jpg",
 "auditid_626_UUID_999999_time__1582577405554.jpg",
 "auditid_626_UUID_999999_time__1582577405557.jpg"
];
const result = myList.filter(a => a.includes("UUID_666666"));
console.log(result);

Answer 5

Answer №3

After implementing Oussails' solution, I made some adjustments to the code. It was necessary to move the filter operation to a variable called arr instead of directly accessing this.images

loadStoredImages() {
  this.storage.get(this.STORAGE_KEY).then(images => {
    if (images) {
      let arr = JSON.parse(images);
      this.images = [];
      arr  = arr.filter(a => a.includes("UUID_" + this.testID));
      for (let img of arr) {
        let filePath = this.file.dataDirectory + img;
        let resPath = this.pathForImage(filePath);
        this.images.push({ name: img, path: resPath, filePath: filePath });
      }
    }
  });
}

Answer 6

After implementing Oussails' solution, I made some adjustments to the code. It was necessary to move the filter operation to a variable called arr instead of directly accessing this.images

loadStoredImages() {
  this.storage.get(this.STORAGE_KEY).then(images => {
    if (images) {
      let arr = JSON.parse(images);
      this.images = [];
      arr  = arr.filter(a => a.includes("UUID_" + this.testID));
      for (let img of arr) {
        let filePath = this.file.dataDirectory + img;
        let resPath = this.pathForImage(filePath);
        this.images.push({ name: img, path: resPath, filePath: filePath });
      }
    }
  });
}

What is the best way to sort through an Array of photo filenames?

Answer №1

Answer №2

Answer №3

Similar questions

How to reset an Angular 7 reactive form to its initial values instead of clearing them completely

What are the steps to add code into the Monaco Editor using Playwright?

Using Angular-cli in conjunction with a different server

Master Angular Autocompletion

Steps to link two mat-autocomplete components based on the input change of one another

When the mat-tree collides with a stylish css grid

Button for saving content located in expo-router header

The code for filtering an array in Angular 9 seems to be failing to display the expected filtered items

Taunting a specific occurrence inside a group

Leveraging jQuery within Angular 6

Issue with Angular routing: Content from app.component is displaying in all components

Tips for extracting individual fields from a payload in Angular 8

The evaluation of mongodb-memory-server is experiencing issues with either failing or timing out

What could be causing the div to be wider than the content inside of it?

Guide on setting an instance property through a callback function triggered by the instance

What is the solution to fixing the error message "Cannot redeclare block-scoped variable 'ngDevMode' "?

Unfortunately, the utilization of an import statement outside a module is restricted when working with Electron

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

Node.js, sigma.js, and the typescript environment do not have a defined window

The type 'Text' does not have a property named 'then'