减少RxJS映射表达式中的运算符数量

Question

I've create an Http request to get json data. Inside that json - there is an object which has an array. ( I need that array).

fromDb$ = of({
    Result: {
      Countries: [{      <--wanted array
        ISOCode: 1,
        Name: 'aaa'

      }, {
        ISOCode: 2,
        Name: 'bbb'

      }]
    }
  });

But- the data in the array has a different structure than I actually need.

I need to map ( name & ISOcode ) to ( name and value )

This is what I've tried:

• Use pluck to extract the inner Array
• mergeMap the array object to a stream of objects (using of() )
• using map to transform each item to a desired structure
• using toArray to wrap all to an array ( so I can bind it to a control)

Here is the actual code :

this.data = this.fromDb$.pipe(pluck<PtCountries, Array<Country>>('Result', 'Countries'), 
                                mergeMap(a => from(a)),
                                map((c: Country) => ({
                                  name: c.Name,
                                  value: c.ISOCode,
                                })),
                              toArray());

The code does work and here is the online demo

Question

It looks like I've complicated it much more than it can be ,Is there a better way of doing it?

Answer 1

This line: mergeMap(a => from(a)) does not make a lot of sense. It's almost as if you did [1,2,3].map(v => v) . You can just remove it.

To simplify this you basically need to use Array.map inside Observable.map.

Try this:

this.data = this.fromDb$.pipe(pluck<PtCountries, Array<Country>>('Result', 'Countries'),
  map((countries: Country[]) => countries.map(country => ({
    name: country.Name,
    value: country.ISOCode,
}))));

Live demo

Answer 2

    this.data = this.fromDb$.pipe(
        mergeMap(object => object.Result.Countries),
        map(country => ({ name: country.Name, value: country.ISOCode })),
        toArray()
    );