tips for converting a single observable item into an observable list

Question

tips for converting a single observable item into an observable list

Within my Angular project, there exists an observable object with the following structure:

export interface FavoritesResponse {
  wallet: boolean;
  deposit: boolean;
  withdraw: boolean;
  transfer: boolean;
  exchange: boolean;
  ticket: boolean;
  account: boolean;
}

My goal is to create an array from this object that only includes properties with a value of true.

For instance, if my favorites object is as follows:

favorites$ = {
  wallet: true,
  deposit: true,
  withdraw: false,
  transfer: false,
  exchange: false,
  ticket: true,
  account: true
}

I aim to transform my enabledFavorites$ to match this format:

enabledFavorites$ = [
  wallet,
  deposit,
  ticket,
  account
]

In other words, convert it into an array containing only the keys that held a value of true. How can I achieve this? While I believe the solution involves utilizing an rxjs pipe and map, the exact implementation eludes me.

javascript angular typescript rxjs observable

Answer 1

Answer №1

If you're looking to convert the output of the observable, which emits an object of type FavoritesResponse, into an array containing only its true values based on keys, you can achieve this through:

Using RxJS map operator to transform the incoming object
Applying native JS methods like Object.keys() along with Array#filter to carry out the conversion process

enabledFavorites$: Observable<string[]> = favorites$.pipe(
  map((favs: FavoritesResponse) => 
    Object.keys(favs).filter((key: string) => !!favs[key])
  )
);

Answer 2

If you're looking to convert the output of the observable, which emits an object of type FavoritesResponse, into an array containing only its true values based on keys, you can achieve this through:

Using RxJS map operator to transform the incoming object
Applying native JS methods like Object.keys() along with Array#filter to carry out the conversion process

enabledFavorites$: Observable<string[]> = favorites$.pipe(
  map((favs: FavoritesResponse) => 
    Object.keys(favs).filter((key: string) => !!favs[key])
  )
);

Answer 3

Answer №2

get favArray$(): Observable<string[]> {
return this.favSettings$.pipe(
  map((favs) => {
    const _items = Object.keys(favs);
    const _result: string[] = [];

    _items.forEach((item) => {
      if (!!(favs as any)[item]) {
        _result.push(item);
      }
    });

    return _result;
  })
);

}

Answer 4

get favArray$(): Observable<string[]> {
return this.favSettings$.pipe(
  map((favs) => {
    const _items = Object.keys(favs);
    const _result: string[] = [];

    _items.forEach((item) => {
      if (!!(favs as any)[item]) {
        _result.push(item);
      }
    });

    return _result;
  })
);

}

Answer 5

Answer №3

It seems like what you're trying to do is convert from

Observable<FavoritesResponse>

to Observable<string[]>, where the string[] contains the checked keys.

One approach could be:

  const enabledFav$ = favOptions$.pipe(
    map(resp => {
      let result = [];
      Object.keys(resp).forEach(key => {
        if (resp.key) {
          result.push(key);
        }
      });
      return result;
    })
  );

I'm not sure about the specific scenario, but this should give you an idea of the code structure.

Here, enabledFav$ represents Observable<string[]>, and favOptions$ represents

Observable<FavoritesResponse>

.

Answer 6

It seems like what you're trying to do is convert from

Observable<FavoritesResponse>

to Observable<string[]>, where the string[] contains the checked keys.

One approach could be:

  const enabledFav$ = favOptions$.pipe(
    map(resp => {
      let result = [];
      Object.keys(resp).forEach(key => {
        if (resp.key) {
          result.push(key);
        }
      });
      return result;
    })
  );

I'm not sure about the specific scenario, but this should give you an idea of the code structure.

Here, enabledFav$ represents Observable<string[]>, and favOptions$ represents

Observable<FavoritesResponse>

.

tips for converting a single observable item into an observable list

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to divide percentages accurately in Angular?

Is it true that all events in JavaScript go through capturing and bubbling phases?

Can you explain the significance of the "@" symbol in the `import from '@/some/path'` statement?

Issue with Three.js failing to display textures

having trouble with my lambda function reading the basic json object

The POST variable consistently remains void

Encountering a peculiar problem with the Bootstrap Carousel where the first slide fails to load

using JavaScript to send numerous text box values to various views

I'm struggling to understand the reasoning behind the 'undefined' error occurring in the Google Maps distance service

Steps for generating data with Typescript Sequelize model without specifying an id:

Testing Angular 4 routing with router.url

Locate the position of a substring within a Uint8Array

Observing modifications in the database is possible after executing the setInterval function

Error in Angular Due to Circular Reference in JSON

Tips for detecting the existence of scrollbar on a webpage and retrieving its coordinates

Positioning Images in Tailwind Modals

Obtaining the id in JavaScript from PHP to display information

Hover and hover-off functions in navigation menu

Unexpected server failure when connecting via socket.io to Node.js http-proxy

Error in ReactJS: Attempting to access property 'preventDefault' of an undefined value