Search code examples
angulartypescriptionic4

How do I filter an Array of photo names?


enter image description hereI have an Array of image names that include a UUID.

images

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

I am displaying them in a html page with this

<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 I am using to call this array is

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

loadStoredImages() {
  this.storage.get(this.STORAGE_KEY).then(images => {
    if (images) {
      let arr = JSON.parse(images);
      this.images = [];  // filter here  .filter((images: any[]) => { return images.includes(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 I am trying to accomplish is filter the array to only include the UUID's that contain this.testID = "666666"; I started working on my filter at this.images = []; I am unsure how the filter would be applied to this.images = []; Any help in this matter would be greatly appreciated.

image from xcode log


Solution

  • Your list must be like this :

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

    Then try this :

    loadStoredImages() {
      this.storage.get(this.STORAGE_KEY).then(images => {
        if (images) {
          let arr = JSON.parse(images);
          this.images = this.images.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 });
          }
        }
      });
    }
    

    Example :

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