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.

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.

• javascript
• typescript
• rxjs

• That's what map is for – Leon Commented Dec 12, 2017 at 23:37
• 4 student.map(student => ({...student, name: 'Bob'})) – ZahiC 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? – Zachscs Commented Dec 13, 2017 at 0:01
• 2 @ZahiC has the correct answer, assuming you are using new enough versions of TypeScript / JavaScript. – Leon 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' – ZahiC Commented Dec 13, 2017 at 0:07

1 Answer 1

@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 
)