[英]Use Rxjs in Angular to update data in a Json coming from different Json sources
I have 3 different services A,B,C. 我有3种不同的服务A,B,C。 These services produce each a different JSON.
这些服务各自产生不同的JSON。 JSON from service A has properties which values need to be replaced with values from JSON B and C.
来自服务A的JSON具有需要用JSON B和C中的值替换的值的属性。
I have solved this using plain JavaScript but I want to use Rxjs, because Rxjs is scalable. 我已经使用普通的JavaScript解决了此问题,但是我想使用Rxjs,因为Rxjs具有可伸缩性。 And I want to return an Observable instead of data.
我想返回一个Observable而不是数据。
My three JSON's: 我的三个JSON:
let A = {
"conditions": [{
"conditionId": "BASFD",
"conditionDescr": "Substitute with component description",
"pay": "P"
}, {
// << more items >>
}]
};
let B = {
"components": [{
"componentId": "BASFD",
"description": "Assortimentsbonus"
}, {
"componentId": "BBY",
"description": "Bonus bypass"
}]
};
let C = {
"text": [{
"textcode": "PAYMENT",
"values": [{
"code": "P",
"description": "Percentage"
}, {
"code": "A",
"description": "Amount"
}]
}, {
"textcode": "PERIOD",
"values": [{
"code": "J",
"description": "Per year"
}, {
"code": "M",
"description": "Per month"
}]
}]
}
My JavaScript code to substitute the values ConditionDescr
and Pay
in JSON A: 我的JavaScript代码替换了JSON A中的
ConditionDescr
和Pay
值:
this.httpClient.get<ConditieTypeObject>(environment.url + 'bonus/' + id, {
params: new HttpParams().append('year', year.toString()),
observe: 'body',
responseType: 'json'
}).pipe(map(x => x.conditions)).subscribe((A) => {
A.forEach((y) => {
y.conditionDescr = B.components.filter(function (x2) {
return x2.componentId == y.conditionId;
})[0].description;
y.pay = C.text.filter(function (x3) {
return x3.textcode == 'PERIOD';
})[0].values.filter(function (x4) {
return x4.code == y.pay;
})[0].description;
});
console.log(A);
});
Then the result is this and thats OK: 然后结果就是这样,那就可以了:
{
"conditions": [{
"conditionId": "BASFD",
"conditionDescr": "Assortimentsbonus",
"pay": "Per year"
}, {
// << more items >>
}]
}
But I want to solve this in Rxjs because I can use an observable which can be passed directly as an async to an HTML table. 但是我想在Rxjs中解决此问题,因为我可以使用一个observable,它可以作为异步直接传递给HTML表。 I don't want to subscribe first into the function like in my code right now.
我不想像现在的代码一样先订阅该函数。
I tried it with switchMap
and concatMap
but that doesn't work. 我用
switchMap
和concatMap
尝试过,但这不起作用。 Anybody have an idea how to solve this in RxJS ? 有人知道如何在RxJS中解决这个问题吗?
You can pipe()
an RxJS map()
after using combineLatest
to combine your three service requests into a single Observable. 您可以在使用
combineLatest
将三个服务请求合并为一个Observable之后,通过pipe()
一个RxJS map()
。 This Observable can then be assigned to a variable in your components class and referenced using the async pipe in your template. 然后可以将此Observable分配给组件类中的变量,并使用模板中的异步管道进行引用。
In your component.ts: 在您的component.ts中:
import { Component, OnInit } from '@angular/core';
import * as fromServices from './services';
import { combineLatest, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
export class ExampleComponent implements OnInit {
// 1. Create a new reference for an Observable that will contain your final data.
finalData$: Observable<any[]>;
constructor(
// 2. Include your various services in your component.
private aService: fromServices.AService,
private bService: fromServices.BService,
private cService: fromServices.CService,
) {}
ngOnInit(): void {
// 3. Initialise the Observables from your services in an Array passed into combineLatest.
this.finalData$ = combineLatest([
this.aService.data$,
this.baService.data$,
this.cService.data$,
])
// 4. Map over each Observable.
.pipe(map(([aData, bData, cData]) => {
// 5. Transform your data. Note: Your Observable must return a value for it to emit a value.
return aData.filter(() => { /* ... */ });
}));
}
}
In your component.html: 在您的component.html中:
<!-- 6. Use the async pipe to subscribe to this data. -->
<p *ngFor="let data of {{ finalData$ | async }}">{{ data.propertyName }}</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.