How to properly chain Dependent Async Pipes in Angular

Question

I have 3 async pipes in my code.

<div>{{formatedData$ | async}}</div>

<div>{{totalStatusData$ | async }}</div>

<div>{{totalPercentageData$ | async}}</div>

component.ts

Actual Data Returned From Service As Follows

[{
        "name": "one",
        "steps": [{
                "id": 1,
                "passed": 1,
                "failed": 3
            },
            {
                "id": 2,
                "passed": 4,
                "failed": 0
            }
        ]
    },
    {
        "name": "two",
        "steps": [{
                "id":3 ,
                "passed": 10,
                "failed": 3
            },
            {
                "id": 4,
                "passed": 4,
                "failed": 8
            }
        ]
    }
]

this.formatedData$ = this.service.data().pipe(map(data) => {

return this.formatData1();

})

now this.formatedData$ is follows

[{
        "name": "one",
        "passed": 5,
        "failed": 3
    },
    {
        "name": "two",
        "passed": 14,
        "failed": 11
    }
]

this.totalStatusData$=this.formatedData$.pipe(map(data) => {
return formatData2(data)
});

Now this.totalStatusData$ as follows

    {

        "passed": 19,
        "failed": 14
    }

$totalPercentageData = this.totalStatusData$.pipe(map(data) => {

return this.formatData3(data);

})

Now $totalPercentageData as follows

{

        "passed": "57.57%",
        "failed": "42.42%"
    }

How can i chain these Observables into One instead of One without breaking the Observable chain, starting from Actual Service Data.

Picci · Accepted Answer · 2020-03-19 21:56:03Z

1

If I understand right, you need to feed the html template with 3 different transformations of the data returned by a single call to an async service.

So, if this is the case, you can try the following strategy,

// create an Observable that subscribes to the source, 
// in this case the service data call, and then shares this one subscription
// with the all other Observables that are created starting from it
this.data$ = this.service.data().pipe(
  share()
)

// then you create ab Observable that performs the first transformation
this.formatedData$ = this.data$.pipe(map(data) => {
  return this.formatData1();
})

// then you create an Observable that performs the second transformation 
// based on the results of the first transformation
this.totalStatusData$ = this.formatedData$.pipe(map(data) => {
   return formatData2(data)
});

// and so on

The idea here is to use the share operator to call just once the remote API wrapped by this.service.data().

answered Mar 19, 2020 at 21:56

Picci

17.8k16 gold badges80 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mithun S Over a year ago

but in this case it breaks the observable chain right?

Collectives™ on Stack Overflow

How to properly chain Dependent Async Pipes in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related