CODEWITHSUNDEEP
angularrxjsobservableasync-pipe
Mithun S
Mithun S

Reputation: 418

How to properly chain Dependent Async Pipes in Angular

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.

Upvotes: 0

Views: 979

Answers (1)

Picci
Picci

Reputation: 17762

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().

Upvotes: 1

Related Questions