14

If I have an observable student: Observable<Student> where Student has the parameter name: string is set to Jim, How can I change the value of name in the students observable to be Bob?

Edit:

Is student.map(student => student.name = 'Bob') supposed to work. Because if yes then there is something else wrong with my program.

6
  • That's what map is for Commented Dec 12, 2017 at 23:37
  • 4
    student.map(student => ({...student, name: 'Bob'})) Commented Dec 13, 2017 at 0:00
  • @ZahiC I don't understand your answer... with larger objects would I have to enter values for every parameter? What if I just want to change one? is ... part of the syntax or is that a place holder for something else? Commented Dec 13, 2017 at 0:01
  • 2
    @ZahiC has the correct answer, assuming you are using new enough versions of TypeScript / JavaScript. Commented Dec 13, 2017 at 0:03
  • 5
    Best practice with map is not to change existing objects, but create a new copy (immutability). {...student, name: 'Bob'} is the new syntax for Object.assign, meaning, copy all the properties from student and override the name property with the value 'Bob' Commented Dec 13, 2017 at 0:07

1 Answer 1

19

@ZahiC's answer is the right one, but let me explain a little bit why.

First, with Rxjs, the less side effects you have, the better. Immutability is your friend! Otherwise, when your app will grow, it's going to be a nightmare trying to guess where an object has been mutated.

Second, since Typescript 2.1 you can use the object spread. Which means that to update a student object, instead of doing:

const newStudent = Object.assign({}, oldStudent, {name: 'new student name'});

You can do:

const newStudent = {...oldStudent, name: 'new student name'};

In both case, you're not mutating the original student, but rather creating a new one with an updated value.

Last thing, is how to combine that with Rxjs.
The map operator is here for that: Take a value, do what you want with it and return a new one which is going to be used down the observable chain.

So, instead of:

student.map(student => student.name = 'Bob');

You should do (as @ZahiC pointed out):

student.map(student => ({...student, name: 'Bob'}));

And in order to avoid shadowing variable name, you might also want to call your observable: student$

student$.map(student => ({...student, name: 'Bob'}));

EDIT:
Since Rxjs 5.5 you should not use operators patched on Observable.prototype and use the pipe operator instead:

student$.pipe(
  map(student => ({...student, name: 'Bob'})),
  tap(student => console.log(student)) // will display the new student 
)
Sign up to request clarification or add additional context in comments.

3 Comments

One note, the map function is declared in 'rxjs/operators'.
If anyone is wondering why the tap in the above example doesn't fire it's because you have to subscribe to it.
Oh yes I could have been more precise and explain that you have to subscribe to it but it's also one of the first thing you learn with observables. @Mickers if you want to know more about that google cold vs host observables :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.