Checking if a value exists in an array using *ngIf

Question

Checking if a value exists in an array using *ngIf

I'm just starting to learn Ionic and Angular, so I'm hoping someone can provide some guidance.

Here is the data I have:

"messages" : [ 
        {
            "sender" : "24",
            "name" : "James",
            "datetime" : ISODate("2019-11-10T20:42:02.090Z"),
            "message" : "test 1",
            "read" : [ 
                {
                    "uid" : "24",
                    "name" : "James",
                    "datetime" : ISODate("2019-11-10T20:42:02.090Z")
                },
                {
                    "uid" : "45",
                    "name" : "Paul",
                    "datetime" : ISODate("2019-11-13T11:32:45.010Z")
                }
            ]
        }]

In my Ionic setup, I currently pass this data as 'mailbox' and 'uid' represents the user's ID.

<ion-item *ngFor="let message of mailbox">
    <ion-item [routerLink]="['/members/mailbox', message.sid" routerDirection="forward">
        {{ message.name}}
        <br />Posted: {{ message.datetime }}
        <div *ngIf="(message.read[0]['uid'] == uid || message.read[1]['uid'] == uid)">READ</div>
    </ion-item>
</ion-item>

I'm looking for a more efficient way to write the ngIf condition since messages.read can have multiple entries. Is there a way to simply check if the 'uid' value exists in messages.read? I tried using Angular filter contains without success.

Thank you!

arrays angular typescript

Answer 1

Answer №1

It's more efficient to delegate the hard work to the .ts file.

You can implement something similar to this;

within your .ts file;

validateId(message: Object) {
    return message["read"].find(x => x.uid === uid);
  }

and in .html;

<ion-item *ngFor="let message of mailbox">
            <ion-item [routerLink]="['/members/mailbox', message.sid" routerDirection="forward">
                {{ message.name}}
                <br />Posted: {{ message.datetime }}
                <div *ngIf="validateId(message)">READ</div>
            </ion-item>
        </ion-item>

Answer 2

It's more efficient to delegate the hard work to the .ts file.

You can implement something similar to this;

within your .ts file;

validateId(message: Object) {
    return message["read"].find(x => x.uid === uid);
  }

and in .html;

<ion-item *ngFor="let message of mailbox">
            <ion-item [routerLink]="['/members/mailbox', message.sid" routerDirection="forward">
                {{ message.name}}
                <br />Posted: {{ message.datetime }}
                <div *ngIf="validateId(message)">READ</div>
            </ion-item>
        </ion-item>

Answer 3

Answer №2

To achieve this functionality, you can use the following code snippet:

let isUidPresent = messages.read.findIndex(reader => reader.uid === uid) > -1

After implementing the above logic, make sure to add the following line in your HTML file:

*ngIf="isUidPresent"

Answer 4

To achieve this functionality, you can use the following code snippet:

let isUidPresent = messages.read.findIndex(reader => reader.uid === uid) > -1

After implementing the above logic, make sure to add the following line in your HTML file:

*ngIf="isUidPresent"

Answer 5

Answer №3

Develop and utilize a personalized pipeline with parameters.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'in'
})
export class InPipe implements PipeTransform {

    transform(value, array:any[]) : boolean {
        return array.indexOf(value) != -1;
    }

}

@Pipe({
  name: 'map'
})
export class MapPipe implements PipeTransform {

  transform(array: any[], mapFn):array {
    return array.map(filterFn);
  }

}

Your *.component.ts:

...
_mapFn(read):string{
  return read['uuid'];
}
mapFn = _mapFn.bind(this);
...

Your template:

<div *ngIf="(message.read[0]['uid'] == uid
<div *ngIf="uuid|in:(message.read|map:mapFn)">...</div>

Note: If you implement it in the template like:

message.read.map((read) => return read['uuid'];).indexOf(uuid) != -1;

then angular will call both functions in every change detection process. That would be very bad and slow down your application every time. This is why you need to write pipes. With pipes angular only call the functions when reference of objects (uuid, message.read) change.

Answer 6

Develop and utilize a personalized pipeline with parameters.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'in'
})
export class InPipe implements PipeTransform {

    transform(value, array:any[]) : boolean {
        return array.indexOf(value) != -1;
    }

}

@Pipe({
  name: 'map'
})
export class MapPipe implements PipeTransform {

  transform(array: any[], mapFn):array {
    return array.map(filterFn);
  }

}

Your *.component.ts:

...
_mapFn(read):string{
  return read['uuid'];
}
mapFn = _mapFn.bind(this);
...

Your template:

<div *ngIf="(message.read[0]['uid'] == uid
<div *ngIf="uuid|in:(message.read|map:mapFn)">...</div>

Note: If you implement it in the template like:

message.read.map((read) => return read['uuid'];).indexOf(uuid) != -1;

then angular will call both functions in every change detection process. That would be very bad and slow down your application every time. This is why you need to write pipes. With pipes angular only call the functions when reference of objects (uuid, message.read) change.

Answer 7

Answer №4

In reference to the approved solution, it is recommended to avoid calling a function in the template as it will trigger on each change detection, which can lead to significant performance overhead, especially within an ngFor loop. If your data set is small and there are not many other activities happening on the page, using a function in the template may be acceptable. However, I prefer to minimize this approach whenever possible :)

If my understanding of your data structure is correct, there can only be one instance of a READ match in the array per user, as a user cannot mark a message as read more than once. In that case, you could implement a nested ngFor loop, utilizing ng-container to prevent unnecessary element creation in the template when not needed.

Therefore, I would suggest the following:

<ion-item *ngFor="let message of mailbox">
  <ion-item >
    {{ message.name}}
    <br />Posted: {{ message.datetime }}
    <ng-container *ngFor="let r of message.read">
      <div *ngIf="r.uid === uid">READ</div>
    </ng-container>
  </ion-item>
</ion-item>

Answer 8

In reference to the approved solution, it is recommended to avoid calling a function in the template as it will trigger on each change detection, which can lead to significant performance overhead, especially within an ngFor loop. If your data set is small and there are not many other activities happening on the page, using a function in the template may be acceptable. However, I prefer to minimize this approach whenever possible :)

If my understanding of your data structure is correct, there can only be one instance of a READ match in the array per user, as a user cannot mark a message as read more than once. In that case, you could implement a nested ngFor loop, utilizing ng-container to prevent unnecessary element creation in the template when not needed.

Therefore, I would suggest the following:

<ion-item *ngFor="let message of mailbox">
  <ion-item >
    {{ message.name}}
    <br />Posted: {{ message.datetime }}
    <ng-container *ngFor="let r of message.read">
      <div *ngIf="r.uid === uid">READ</div>
    </ng-container>
  </ion-item>
</ion-item>

Answer 9

Answer №5

This question pertains to JavaScript, not Angular. However, if you're looking for a solution, you can use the following code:

*ngIf="message.read.filter(x => x.uid === uid).length > 0"

Answer 10

This question pertains to JavaScript, not Angular. However, if you're looking for a solution, you can use the following code:

*ngIf="message.read.filter(x => x.uid === uid).length > 0"

Answer 11

Answer №6

To determine if a letter has been read, you can create a variable to store this information and then check if the `uid` is in your `mailbox` array:

Sample code from your.component.ts:

isLetterRead = false;
uid;

getEmails() {
    this.webAPI.getEmails().subscribe(response => {
        this.mailbox = response;
        isLetterRead = response.read.some(r => r.uid == uid);
    })

}

HTML implementation:

<ion-item *ngFor="let message of mailbox">
     <!-- Omitted code for brevity -->
     <div *ngIf="isLetterRead">READ</div>
</ion-item>

Answer 12

To determine if a letter has been read, you can create a variable to store this information and then check if the `uid` is in your `mailbox` array:

Sample code from your.component.ts:

isLetterRead = false;
uid;

getEmails() {
    this.webAPI.getEmails().subscribe(response => {
        this.mailbox = response;
        isLetterRead = response.read.some(r => r.uid == uid);
    })

}

HTML implementation:

<ion-item *ngFor="let message of mailbox">
     <!-- Omitted code for brevity -->
     <div *ngIf="isLetterRead">READ</div>
</ion-item>

Checking if a value exists in an array using *ngIf

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Enhance the performance of your React/NextJS app by controlling the rendering of a component and focusing on updating

Remove the lesser of two duplicate items from the list by comparing their count keys

What measures can be taken to stop an event from being triggered from an external source?

Using Typescript with React functional components: the proper way to invoke a child method from a parent function

Control the transparency of the initial parent div that includes an *ngFor loop

I am looking to append a new string to an existing string array

Leveraging d3.js for Visualizations in an Angular2/Node/Express/MongoDB Application

Why bother with creating mappers to transform entity-to-DTOs?

Angular: Datepipe displays '01/01/0001' for NULL data retrieved from Database

Looking to utilize custom toolbars with apexcharts for enhanced functionality

Utilizing Prisma's Create Object to Store Return String from Imported Function in Database

Using *ngIf to display a dropdown menu

Another option to avoid using complicated else if chains

Adjusting table to include hashed passwords for migration

Why does the Angular asyncScheduler test fail when using flush()?

Clear function of signature pad not working inside Bootstrap modal dialogue box

What could be causing the Google Sign-In functionality to fail in an Angular web application?

Tips for importing libraries in a web-worker with TypeScript

Within Angular, the Subscribe function is invoked after all other methods in the component have been executed. Consequently, this sequence of events often prevents me from effectively utilizing the response data

The attribute 'X' is not present in the specified type 'IntrinsicAttributes & InferPropsInner'