When one observable is linked to data in another observable, it creates a third observable that emits mapped data

Question

When one observable is linked to data in another observable, it creates a third observable that emits mapped data

Although this question may seem simple to a seasoned professional, I have struggled to wrap my head around it despite trying multiple approaches.

In my code, I have an observable observable1 that contains a list of keys like:

[
 key1,
 key3,
 key4,
 ..
]

The second observable observable2 contains data with some keys from observable1 mapping to them. It looks something like:

[
 {key1, val1},
 {key2, val2},
 {key3, val3},
 {key4, val4},
 ..
]

Assuming each key in observable1 has a corresponding mapping in observable2, I want to create a new observable observable3 that only emits the data mapped to by a key in observable1.

Using the example provided, the expected output should omit the data for key2 and look like:

[
 {key1, val1},
 {key3, val3},
 {key4, val4},
 ..
]

This result should be logged to the console after subscribing.

How can this functionality be achieved using rxjs? Just for your information, I am working with typescript.

typescript rxjs

Answer 1

Answer №1

In my response on this thread, I explained that achieving what you're describing is not feasible. Observables represent continuous streams of events, which could be triggered by various actions like user interactions or incoming messages. When an event occurs in `observable2`, it's unpredictable whether all the events from `observable1` have been received, making it uncertain if its key will be present in the stream.

However, what can be done is checking if an object's key exists within the set of keys previously received from `observable1` up to a certain point in time. The ideal method to accomplish this would involve aggregating `observable1` into a Behavior containing a set of keys using accumB, and subsequently filtering `observable2` based on the current value of that Behavior. Unfortunately, the RxJS API lacks support for the Behavior type, eliminating this elegant solution and forcing us to resort to manipulating mutable variables to store previously seen keys at any specific moment in time. We then proceed to filter `observable2` by referencing this variable for key comparison.

type KeyValuePair<K, V> = { key: K, val: V };

function filterByKey<K, V>(
    keys: Observable<K>,
    o: Observable<KeyValuePair<K, V>>
): Observable<KeyValuePair<K, V>> {
    var seenKeys: K[] = [];

    keys.subscribe(key => {
        if (seenKeys.indexOf(key) === -1) {
            seenKeys.push(key);
        }
    });

    return o.filter(x => seenKeys.indexOf(x.key) !== -1);
}

(Note: Due to working without an editor, there might be some errors in the code snippet, but the concept remains intact.)

Answer 2

In my response on this thread, I explained that achieving what you're describing is not feasible. Observables represent continuous streams of events, which could be triggered by various actions like user interactions or incoming messages. When an event occurs in `observable2`, it's unpredictable whether all the events from `observable1` have been received, making it uncertain if its key will be present in the stream.

However, what can be done is checking if an object's key exists within the set of keys previously received from `observable1` up to a certain point in time. The ideal method to accomplish this would involve aggregating `observable1` into a Behavior containing a set of keys using accumB, and subsequently filtering `observable2` based on the current value of that Behavior. Unfortunately, the RxJS API lacks support for the Behavior type, eliminating this elegant solution and forcing us to resort to manipulating mutable variables to store previously seen keys at any specific moment in time. We then proceed to filter `observable2` by referencing this variable for key comparison.

type KeyValuePair<K, V> = { key: K, val: V };

function filterByKey<K, V>(
    keys: Observable<K>,
    o: Observable<KeyValuePair<K, V>>
): Observable<KeyValuePair<K, V>> {
    var seenKeys: K[] = [];

    keys.subscribe(key => {
        if (seenKeys.indexOf(key) === -1) {
            seenKeys.push(key);
        }
    });

    return o.filter(x => seenKeys.indexOf(x.key) !== -1);
}

(Note: Due to working without an editor, there might be some errors in the code snippet, but the concept remains intact.)

Answer 3

Answer №2

It seems like you're looking for a way to extract specific values based on keys from multiple objects. One approach could be:

const dataKeys = Rx.Observable.fromArray(['key1','key3', 'key4'])
const dataObjects = Rx.Observable.fromArray([
  {key1: 'val1'},
  {key2: 'val2'},
  {key3: 'val3'},
  {key4: 'val4'}
])

const filteredData = dataKeys
  .flatMap(key => dataObjects.skipWhile(obj => !obj.hasOwnProperty(key)).take(1))

This code snippet processes each key in dataKeys, filtering out objects in dataObjects until the specified key is found, then emitting that object. Just keep in mind that if the key order is mixed, this method may not work as expected.

If your data is static and not received asynchronously, using Observables might not be necessary. In such cases, you can directly filter the objects based on key matches like so:

const keysToFilter = ['key1','key3', 'key4']
const dataObjs = [
  {key1: 'val1'},
  {key2: 'val2'},
  {key3: 'val3'},
  {key4: 'val4'}
]

const extractedValues = dataObjs.filter(obj => keysToFilter.includes(Object.keys(obj)[0]))

Answer 4

It seems like you're looking for a way to extract specific values based on keys from multiple objects. One approach could be:

const dataKeys = Rx.Observable.fromArray(['key1','key3', 'key4'])
const dataObjects = Rx.Observable.fromArray([
  {key1: 'val1'},
  {key2: 'val2'},
  {key3: 'val3'},
  {key4: 'val4'}
])

const filteredData = dataKeys
  .flatMap(key => dataObjects.skipWhile(obj => !obj.hasOwnProperty(key)).take(1))

This code snippet processes each key in dataKeys, filtering out objects in dataObjects until the specified key is found, then emitting that object. Just keep in mind that if the key order is mixed, this method may not work as expected.

If your data is static and not received asynchronously, using Observables might not be necessary. In such cases, you can directly filter the objects based on key matches like so:

const keysToFilter = ['key1','key3', 'key4']
const dataObjs = [
  {key1: 'val1'},
  {key2: 'val2'},
  {key3: 'val3'},
  {key4: 'val4'}
]

const extractedValues = dataObjs.filter(obj => keysToFilter.includes(Object.keys(obj)[0]))

Answer 5

Answer №3

Yesterday, a question similar to this one was asked: RxJs: updating values in a list from an other stream identified by an ID

If the number of items and their order is not guaranteed, you can collect all items from both observable1 and observable2, then merge them into a single Observable:

let observable1 = Observable.from(['key1', 'key3', 'key4']);
let observable2 = Observable.from([{id: 'key1', val: 'val1'}, {id: 'key2', val: 'val2'}, {id: 'key3', val: 'val3'}, {id: 'key4', val: 'val4'}]);

let observable3 = Observable.forkJoin(
  observable1.toArray(),
  observable2.toArray(),
  (keys1, results1) => {
    let results = [];
    keys1.forEach(key => {
      results1.forEach(result => {
        if (key === result.id) {
          results.push(result);
        }
      });
    });

    return results;
  });

observable3
  .subscribe(val => console.log(val));

The main drawback here is that you need to gather all items from both Observables before merging them.

This code snippet will output the following to console:

[ { id: 'key1', val: 'val1' },
  { id: 'key3', val: 'val3' },
  { id: 'key4', val: 'val4' } ]

Answer 6

Yesterday, a question similar to this one was asked: RxJs: updating values in a list from an other stream identified by an ID

If the number of items and their order is not guaranteed, you can collect all items from both observable1 and observable2, then merge them into a single Observable:

let observable1 = Observable.from(['key1', 'key3', 'key4']);
let observable2 = Observable.from([{id: 'key1', val: 'val1'}, {id: 'key2', val: 'val2'}, {id: 'key3', val: 'val3'}, {id: 'key4', val: 'val4'}]);

let observable3 = Observable.forkJoin(
  observable1.toArray(),
  observable2.toArray(),
  (keys1, results1) => {
    let results = [];
    keys1.forEach(key => {
      results1.forEach(result => {
        if (key === result.id) {
          results.push(result);
        }
      });
    });

    return results;
  });

observable3
  .subscribe(val => console.log(val));

The main drawback here is that you need to gather all items from both Observables before merging them.

This code snippet will output the following to console:

[ { id: 'key1', val: 'val1' },
  { id: 'key3', val: 'val3' },
  { id: 'key4', val: 'val4' } ]

When one observable is linked to data in another observable, it creates a third observable that emits mapped data

Answer №1

Answer №2

Answer №3

Similar questions

Ensuring strictNullChecks in Typescript is crucial when passing values between functions

Implementing computed properties: A guide to incorporating type setting

Struggling to bring in { useActionState } from 'react' while trying to follow the latest next.js tutorial with next.js v15.0.0-canary.28, react v19.0.0-rc, and types/react v18.2.21

The proper method for organizing a nested array object - an obstacle arises when attempting to sort the array

Angular 9 - Refresh page while redirecting to the same URL, triggering only the API call specific to the current page

Building upon the foundation: Extending a base component in Angular

What is the process for installing all TypeScript definition files based on the packages.json file?

Sort the observable array by the property of its objects

The importance of specifying return types in Express routes when using TypeScript

What is the functionality and purpose of reselect's createStructuredSelector in a Typescript environment?

Steps for constructing an object literal with a property designated as the `keyof` type

Transitioning from Angular Http to HttpClient: Overcoming Conversion Challenges

How can we activate intellisense for a Vue component's template HTML?

Can the hexadecimal value from an input type color be extracted and used to populate form fields that will then be displayed in a table after submission?

Using Angular 6 HttpClient to retrieve an object of a specific class

Guide to encapsulating an asynchronous function in a promise

What is the best way to enhance a react-bootstrap component with TypeScript?

Using "array_agg" in a "having clause" with Sequelize

Exploring the inner components of an entity without the need for external tools

Learn how to dynamically activate an icon in Angular to enhance user interaction