Menu
In my Angular application I use HttpClient to get json data from server. However, I need to do some conversion to the returned data at the client-side.
So I try to convert an array of Type A returned from the server to an array of Type B with the following code snippet.
this.http.get<any[]>(this.env.accounts.url.accountTypes).pipe(map(e => {
console.log(e); // print the retuned array not a single item
return {'label': e.name, 'value': e.id}
}
)).subscribe(data => {
this.accountTypes = data;
console.log(this.accountTypes); // prints {label: undefined, value: undefined}
});
I must be doing this wrong, but I cannot figure out what is wrong here.
The server returns an array like:
[
{name: "Name 1", id: 1},
{name: "Name 2", id: 2},
{name: "Name 3", id: 3},
]
And I need to convert it into the following format
[
{label: "Name 1", value: 1},
{label: "Name 2", value: 2},
{label: "Name 3", value: 3},
]
Can somebody please point out what is wrong in my code and how to fix it.
242
To convert an array of objects to a Map , call the map() method on the array and on each iteration return an array containing the key and value. Then pass the array of key-value pairs to the Map() constructor to create the Map object. Copied!
To convert from array to observable you can use Rx. Observable. from(array) . To convert from observable to array, use obs.
The map operator in RxJS transforms values emitted from the source observable based on a provided projection function. This is similar to Array. map , except we are operating on each value emitted from an observable as it occurs rather than each value contained within an array.
The map operator function can be used to transform the values in an observable into derived values: import { from } from "rxjs"; import { map } from "rxjs/operators"; const observable = from<number>([1, 2, 3]); observable. pipe(map(x => 10 * x)); const subscription = observable. subscribe( (value) => console.
You are confusing Array.map, with RxJS's map operator.
As stated on the RxJS documentation for the map operator, the purpose of Map is to
Apply projection with each value from source.
What you can do instead, is this:
this.http.get<any[]>(this.env.accounts.url.accountTypes)
.pipe(
map(res => {
// insert logic
const data = res.map(obj => ({
label: obj.name,
value: obj.id
}));
return data;
})
)).subscribe(data => {
this.accountTypes = data;
console.log(this.accountTypes); // prints {label: undefined, value: undefined}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
