Join the nested Observables array

Question

Join the nested Observables array

I have an array that holds objects, each containing two properties where one is an observable value.

let myArray = [{def: 'name1', value: EventEmitter_}, {def: 'name2', value: EventEmitter_}]

My goal is to subscribe to the observables and return the root object in which the change occurred.

Currently, I am only able to get the specific value.

      myArray.forEach(item => {
        item.value.subscribe(val => console.log(val))
      })

I attempted using merge

  merge(myArray).subscribe((value) => {
        console.log(value)
       })

However, this approach does not work if the observable is nested within another object.

javascript angular typescript rxjs observable

Answer 1

Answer №1

One way to handle the data flow is by using piping.

myData.forEach(item => {
  item.value.pipe(
    map(val => [item.definition, val]),
  ).subscribe(([def, val]) => console.log(`Processing ${def}: ${val}`));
})

Answer 2

One way to handle the data flow is by using piping.

myData.forEach(item => {
  item.value.pipe(
    map(val => [item.definition, val]),
  ).subscribe(([def, val]) => console.log(`Processing ${def}: ${val}`));
})

Answer 3

Answer №2

const combinedObservables = merge(
    ...this.array.map((x: any) =>
      x.value.pipe(map((res) => ({ def: x.def, response: res })))
    )
  );

By merging the transformed "observables" with properties "def" and "response", you only require a single subscription.

For further reference, check out this StackBlitz example.

Answer 4

const combinedObservables = merge(
    ...this.array.map((x: any) =>
      x.value.pipe(map((res) => ({ def: x.def, response: res })))
    )
  );

By merging the transformed "observables" with properties "def" and "response", you only require a single subscription.

For further reference, check out this StackBlitz example.

Join the nested Observables array

Answer №1

Answer №2

Similar questions

Guide on separating a variable by commas using jQuery

Tips for transfering variables from an electron application to the backend of an Angular project

Is there a way to initiate the server only after webpack has finished bundling all of the bundles

Troubleshooting the challenge of transitioning from Angular 4 to Angular 9 with flatMap

Ways to reach the Document Object Model in a functional component

Is it possible to link actions to a storage location external to a component?

Generating numerous responses in Node (sails js) from a solitary function

validate the existence of the username upon submission of the form

When the add button is clicked, I would like to implement a feature where a checkbox is added

Tips for obtaining the "inner type" of a particular "instance" in TypeScript's generics

What sets apart defining a function in ReactJS using only parentheses versus curly braces within parentheses?

Enhancing images by creating clickable sections in a more organized and efficient manner

In Typescript, is it correct to say that { [key: string]: any } is identical to { [key: number]: any }?

Sidenav Angular Material cdkScrollable is an effective tool for creating scrollable

Using single quotation marks in Javascript

The Body Parser is having trouble reading information from the form

Retrieve the element by its id using JavaScript even when there are no form tags present on the webpage

Create PDF on the server side using Asp.Net Core and then display it in the browser using Angular

Lazy loading AngularJS UI router named views is an efficient way to improve performance

Is it possible to continuously re-render a React Functional Component with Axios and useState/useEffect?