RxJS operator with array

Question

I think I have a misunderstanding on how works RxJS with an array when I receive it from an HTTP call.

For example I have:

  public getNews(): Observable<News[]> {
    return this.http.get<News[]>("/news");
  }

And after I want to use a simple map on it:

this.newsService.getNews().pipe(map(news => {
    return {
      // DO SOMETHING HERE WITH NEWS
    };
}));

The problem is the type of my param, Typescript told me its a array of News but it's inside a map so normally it has to of type News right?

I don't know If I'm clear, but if someone can explain me it would be great :)

See screenshot here

The rxjs operator maps the array to something else. It's not the same as Array#map. You'll want to call Array#map inside the map operator. — Ingo Bürk
– Ingo Bürk, Commented Mar 3, 2020 at 8:35
You're misunderstanding the RxJS map operator...it's acting on the whole emitted object, an array of News not each item of the news array. Within the RxJS map you can do an array map news => news.map(singleNews => ({...singleNews, addedProperty: 1})). If you clarify what you're aiming for I'll post answer — Andrew Allen
– Andrew Allen, Commented Mar 3, 2020 at 8:42
@AndrewAllen I understand what you're saying but in the documentation there is this example. They take an array of object and after in the map they have access to the object. And in my case it's still an array. Is it because it come from a request? const source = from([ { name: 'Joe', age: 30 }, { name: 'Frank', age: 20 }, { name: 'Ryan', age: 50 } ]); const example = source.pipe(map(({ name }) => name)); LINK HERE — Lud
– Lud, Commented Mar 3, 2020 at 8:54
@lud the from RxJS operator emits the array as a sequence of values. This (very likely) isn't what you want. You have an array from an api call and within the RxJS map you have a plain array object you can do standard manipulation to — Andrew Allen
– Andrew Allen, Commented Mar 3, 2020 at 8:57

Massimo Costa · Accepted Answer · 2020-03-03 09:21:42Z

6

Hi to convert an array to a list of items you could use the flatMap operator; the you can work on each item in the subscribe or trasform with map

this.service.getNews().pipe(
    flatMap(x => x)
).subscribe(x => {
    // do something for each item
});

or

this.service.getNews().pipe(
    flatMap(x => x),
    map(x => {
    // transform each item
    })
);

the second is still an Observable

answered Mar 3, 2020 at 9:21

Massimo Costa

1,88015 silver badges24 bronze badges

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

2 Comments

Lud Over a year ago

it works, so if I understand well, there is a difference between the observable of News[] that http returns and the observable of News[] that flatMap returns?

Massimo Costa Over a year ago

well, flatMap projects the original observer to a flat list of observers

Fahd Lihidheb · Accepted Answer · 2020-03-03 08:42:21Z

0

Well, the map operator in rxjs's pipe is operating on the stream of async data, in other words, the Observable.

So here, you have an Observable<News[]> which means a stream of New[]. that means your this.newsService.getNews().pipe(map(news => {});'s news is an array of News.

answered Mar 3, 2020 at 8:42

Fahd Lihidheb

7104 silver badges22 bronze badges

Comments

Mihail Sokolov · Accepted Answer · 2020-03-03 09:40:57Z

0

If you would like to transform each item inside pipe() you can use:

this.getNews()
        .pipe(
            switchMap(newsList => from(newsList)
                .pipe(
                    map(news => {
                        // Do something with each item
                        console.log(news);

                        return news;
                    })
                )
            ),
            // Set back to array
            reduce((curr: NewsData[], next: NewsData) => [...curr, next], []),
        )
        .subscribe(data => console.log(data));

answered Mar 3, 2020 at 9:40

Mihail Sokolov

1

Collectives™ on Stack Overflow

RxJS operator with array

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related