1

I am trying to understand the map() operator of RxJS.

Below is one of the example with works as expected. In this example all names will be appended with text student one by one.

studentArray:string[]=['sam','robert','lisa'];
from(this.studentArray).pipe(map((s:string)=>s=s+' student')).subscribe(d=>console.log(d));

Now I have below sample code. With this code I am calling a service which returns array of ToDo objects. What I am trying to do is the iterate each ToDo object and return the updated object

enter image description here

But when I do so it gives an error and reason for the error is data variable in the map operator. With above example map operator is not getting single element of an array of ToDo but the entire array is being passed to the map.

Am I doing something wrong here?

Edit: Updated image.

Improve this question
3
  • 1
    the map should probably be something like .pipe(map(data => data.title + 'append')).subscribe(...) without the assignment. Also the map pipe is going to give your an array. If you want to map the array items you have to do .pipe(map(data => data.map(item => ....))) inside the map pipe. Commented Aug 4, 2022 at 21:46
  • @JasonWhite The question here I is string array is functionating differently than an array of custom object. See my string example. I would like to do the same with custom array object. Commented Aug 4, 2022 at 23:49
  • Tip: inline code formatting (like this) only needs single backticks. A "code fence" of three backticks is only needed for block formatting. Commented Aug 21, 2022 at 12:30

4 Answers 4

Reset to default
3

map() function that you use is not JavaScript standard Array.map, it is the RxJs map operator, it applies a project function to each value emitted (in your case, a single value is an array of ToDo) by the source Observable, and emits the resulting values as an Observable.

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

2 Comments

Thanks for clarification. But in that theory when I use the same RxJS map operator with string array its works fine. See my example in the question.
In the string array example, you use from operator that emits the items of that array, and then the map operator concatenate ' student' for each item emitted. rxjs.dev/api/index/function/from
1

It is not Angular-ish thing per say but it is more a Typescript compiler issue. It is doing its job correctly telling you that you are assigning something of type B to something else of type C. In our case here, it is the fact that you are assigning a string to an array of TODOs.

What @Jason White mentioning in the comment is IMO the correct answer to solve your problem.

Improve this answer

Comments

0

You are using the map operator incorrectly. The map operator receives a value, transforms it, and returns the transformed value. You are doing an assignment instead. A valid example would be:

.pipe(
   map((value: string) => value + 'append')
)

Also, your data is not a single ToDo but an array, i.e. ToDo[]. So with data = data.title + 'append' you are trying to assign a string to a ToDo[].

If I understand correctly, you want to append something on each ToDo's title property. Then you would have to do something like this:

this.http.get<ToDo[]>('YOU-ENDPOINT-URL-HERE').pipe(
   concatMap((dataArray: ToDo[]) => from(dataArray)), // from array to single objects
   map((data: ToDo) => {
      data.title += 'append'; // transform tittle
      return data; // return transformed data
   }),
   toArray() // recreate array
).subscribe((d) => console.log(d));

EDIT: Your first example is not equivalent to your use-case. The from operator takes an array, in your example string[], and converts it into an Observable<string>.

The http.get<Todo[]> declares that the returned type from your backend is going to be an array. And this is the type of data that will be passed to your pipe, hence to your map operator as well.

Improve this answer

2 Comments

Updated screenshot. Yes I would like to update the title for every custom object in the array. The question here is why the data being passed to map is an array. See my similar type of example in the question. Which works fine with map but when I try to do the same with custom object array it doesn't work.
@RaviKhambhati See my EDIT section. On another note, you are using the map operator incorrectly in your updated screenshot as well. Please re-read my answer.
0

Follow @Vasileios Kagklis's answer. He explains your issue. The rxjs map pipe is completely different than the JavaScript higher order map function. You shouldn't be assigning a value in the map pipe with =.

I'm not 100% sure what you're trying to accomplish with this but from what I can understand you might be looking for something like...

this.http.get<ToDo[]>(`....`)
  .pipe(
    map(data => data.map(todo => ({
       ...todo,
       title: todo.title + 'append'
     })
  )
  .susbscribe(todos => console.log(todos));

So the map rxjs pipe, receives a ToDo[], so data is a ToDo[] not a single ToDo. So once the data is emitted you have to iterate over that array and mutate each item in the array (JavaScript's higher order map function) updating the title.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.