Check that the elements within the array are present in the observable array

Question

Check that the elements within the array are present in the observable array

I need to confirm whether the items in the array below:

const payment1: Payment = new Payment('1000'); // 1000 = id
const payment2: Payment = new Payment('1001');

const paymentArray: Payment[];
paymentArray.push(payment1, payment2);

are present in my observable array:

payments$: Observable<Payment[]>;

What I want is a boolean value (non-observable) as a result.

I have attempted using filter pipe and map but have not been successful:

this.paymentArray.forEach(element => {
  this.payments$.pipe(map(payments => payments.filter(payment => payment.id === element['id'])));
});

angular typescript rxjs observable

Answer 1

Answer №1

when dealing with an array of objects, it is beneficial to create a map of those elements in order to efficiently compare them within a filter function.

ngOnInit() {

    this.idsToFind = ['1000', '1231', '2323'];
    const paymentArray: Payment[] = [];
    const payment1: Payment = new Payment('1000'); // 1000 = id
    const payment2: Payment = new Payment('1001');

    paymentArray.push(payment1, payment2);

    this.payments$ = of(paymentArray);

    const idsMap = this.idsToFind.reduce(
      (a, b) => { return { ...a, [b]: true } }, {}
    );
    console.log(idsMap);

    this.payments$
      .pipe(
        map((payments) =>
          payments.filter(
            (payment: Payment) => idsMap[payment.id])
        )
      )
      .subscribe((missings) => console.log(missings));

  }

Answer 2

when dealing with an array of objects, it is beneficial to create a map of those elements in order to efficiently compare them within a filter function.

ngOnInit() {

    this.idsToFind = ['1000', '1231', '2323'];
    const paymentArray: Payment[] = [];
    const payment1: Payment = new Payment('1000'); // 1000 = id
    const payment2: Payment = new Payment('1001');

    paymentArray.push(payment1, payment2);

    this.payments$ = of(paymentArray);

    const idsMap = this.idsToFind.reduce(
      (a, b) => { return { ...a, [b]: true } }, {}
    );
    console.log(idsMap);

    this.payments$
      .pipe(
        map((payments) =>
          payments.filter(
            (payment: Payment) => idsMap[payment.id])
        )
      )
      .subscribe((missings) => console.log(missings));

  }

Answer 3

Answer №2

If you're looking to achieve a similar functionality, check out the following code example along with my stackblitz demo: https://stackblitz.com/edit/angular-yg1b11

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  payments$: Observable<Payment[]>;
  idToFind = '';
  isFounded = false;

  ngOnInit() {

    this.idToFind = '1000'
    const paymentArray: Payment[] = [];
    const payment1: Payment = new Payment('1000'); // 1000 = id
    const payment2: Payment = new Payment('1001');

    paymentArray.push(payment1, payment2);

    this.payments$ = of(paymentArray);

    this.payments$.subscribe((x) => {
      x.forEach(element => {
        if (element.id == this.idToFind) {
          this.isFounded = true;
        }
      })
    })

  }

}

export class Payment {
  id: string;

  constructor(id: string) {
    this.id = id;
  }

}

Answer 4

If you're looking to achieve a similar functionality, check out the following code example along with my stackblitz demo: https://stackblitz.com/edit/angular-yg1b11

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  payments$: Observable<Payment[]>;
  idToFind = '';
  isFounded = false;

  ngOnInit() {

    this.idToFind = '1000'
    const paymentArray: Payment[] = [];
    const payment1: Payment = new Payment('1000'); // 1000 = id
    const payment2: Payment = new Payment('1001');

    paymentArray.push(payment1, payment2);

    this.payments$ = of(paymentArray);

    this.payments$.subscribe((x) => {
      x.forEach(element => {
        if (element.id == this.idToFind) {
          this.isFounded = true;
        }
      })
    })

  }

}

export class Payment {
  id: string;

  constructor(id: string) {
    this.id = id;
  }

}

Answer 5

Answer №3

To retrieve an observable result, you can utilize the toPromise method in the following way:

const amount1: string = '100';
const amount2: string = '200';

const amountsArray: string[] = [];
amountsArray.push(amount1, amount2);

const amounts$ = of(['100', '200', '300']);

const allIncluded = await from(amountsArray).pipe(withLatestFrom(amounts$), every(([item, amounts]) => amounts.includes(item))).toPromise();

Answer 6

To retrieve an observable result, you can utilize the toPromise method in the following way:

const amount1: string = '100';
const amount2: string = '200';

const amountsArray: string[] = [];
amountsArray.push(amount1, amount2);

const amounts$ = of(['100', '200', '300']);

const allIncluded = await from(amountsArray).pipe(withLatestFrom(amounts$), every(([item, amounts]) => amounts.includes(item))).toPromise();

Answer 7

Answer №4

To successfully process the observable data, you must pass it through a pipe and map the stream accordingly. Within the callback function of the map method, ensure that each element in the paymentArray is present in the provided value.

Refer to this illustrative example:

const ids = paymentArray.map(payment => payment.id);

this.payments$.pipe(
  map(paymentsList => {
    const paymentIds = paymentsList.map(payment => payment.id);
    return ids.every(id => paymentIds.includes(id));
  })
)
// The `value` output will display either true or false after the validations.
.subscribe(value => console.log(value));

Answer 8

To successfully process the observable data, you must pass it through a pipe and map the stream accordingly. Within the callback function of the map method, ensure that each element in the paymentArray is present in the provided value.

Refer to this illustrative example:

const ids = paymentArray.map(payment => payment.id);

this.payments$.pipe(
  map(paymentsList => {
    const paymentIds = paymentsList.map(payment => payment.id);
    return ids.every(id => paymentIds.includes(id));
  })
)
// The `value` output will display either true or false after the validations.
.subscribe(value => console.log(value));

Check that the elements within the array are present in the observable array

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Enhancing Angular functionality with the addition of values to an array in a separate component

Submitting a Form with Request Body using Angular 2

Advantages of incorporating types through imports versus relying solely on declaration files in Typescript

Angular 2: Triggering the "open" event for a Bootstrap dropdown

Placing a MongoDB query results in an increase of roughly 120MB in the total JS heap size

Tailoring Aurelia for .cshtml integration

Do we require two-way binding to effectively exchange data between components in this situation?

No response data being displayed after Angular post request

Excessive recursion detected in the HttpInterceptor module

Unexpected silence from the Express web server

Transform Angular Material Table selection color with selection

Guide on implementing ng2-completer with translation features

Error encountered during the deployment of Ionic 3 with TypeScript

What is the best way to display toastr messages in an Angular application?

Issue with Angular 6: Unable to match nested routes

Angular: Modify parent component's field using route

The function called v1.isEqual is throwing a TypeError because it is not recognized as

Encountered an error while attempting to install the @typescript-eslint/eslint-plugin

Working with JSON data in Typescript without specified keys

Navigating through object keys in YupTrying to iterate through the keys of an