code in subscribe method does not run in the right order

Question

From get request I receive object array and I would like to assign that data to two different variables. One variable will get all the data, second variable will get a mutated version of that data.

The code I tried:

this.service.getEmployeeTimesheets().subscribe(res => {

     this.timesheets = res; 
     this.mutatedTimesheets = res.map(j => {

       delete j["keyName1"];
       delete j["keyName2"]; 

     });
 console.log(this.mutatedTimesheets);

   });

What happens is that for some reason timesheets value gets changed and mutatedTimesheets gets array of undefined

I think you are using http. use httpclient https://angular.io/guide/http — Khurshid Ansari, Apr 23 '19 at 06:39

Jojofoulk · Answer 1 · 2019-04-23T06:31:28.650

0

EDIT: To make a multiple copies of the same object without having them modify each other you can use var obj = JSON.parse(JSON.stringify(res)).

So in your case: this.timesheets = JSON.parse(JSON.stringify(res));

There are more in depth explanation about how object cloning behaves in javascript (e.g: How do I correctly clone a JavaScript object?) but the JSON function chain does the trick here

In your res.map() you forgot to return j:

this.mutatedTimesheets = res.map(j => {

    delete j["keyName1"];
    delete j["keyName2"]; 
    return j;

});

Should do the trick

edited Apr 23 '19 at 06:31

answered Apr 23 '19 at 06:02

Jojofoulk

2,127
1
7
25

thanks, that fixed the undefined issue, but timesheets variable still is an array of objects with deleted properties. That is the most weird part for me. Map is supposed to give a new array while leaving the old one intact. However it also changes the original res array. – Vaidas Masys Apr 23 '19 at 06:20
Right, that's because of how javascript makes a copy of the response object, to fix this you can do this ` this.timesheets = JSON.parse(JSON.stringify(res));` – Jojofoulk Apr 23 '19 at 06:25

score 0 · Answer 2 · answered Apr 23 '19 at 06:28

it doesn't work like that, when map function returns new array it returns new array, but object references are the same, for example if y have

    var user = {firstname:"user1",password:"pass123"};

    var first = [user];

    var second =[user];

    delete user["firstname"];

    console.log(first) // [{password:"pass123"}]
    console.log(second) // [{password:"pass123"}]

it means that user object references is same no metter in which array you set it, so when you return new array using map, the object references stay same, so everything you do in objects are same for both arrays, you could do that to prevent that happening

this.mutatedTimesheets = res.map(j => {
    let newObjectReference ={...j};
    delete newObjectReference["keyName1"];
    delete newObjectReference["keyName2"]; 
    return newObjectReference;

});

Debojyoti · Answer 3 · 2019-04-23T07:37:28.990

You are doing 2 mistakes.

1) Copying array by reference. So timesheets also getting modified

2) Not returning the modified element from map

Try this out

this.service.getEmployeeTimesheets().subscribe(res => {

     this.timesheets = res; 
     this.mutatedTimesheets = res.map(j => {

       // Re-reference the current object
       j = {...j};

       delete j["keyName1"];
       delete j["keyName2"]; 

       return j;

     });

     console.log(this.mutatedTimesheets);

   });

code in subscribe method does not run in the right order

3 Answers3

Try this out