Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change value in an observable

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.

like image 619
Zachscs Avatar asked Dec 12 '17 23:12

Zachscs


1 Answers

@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 
)
like image 82
maxime1992 Avatar answered Oct 24 '22 11:10

maxime1992