Map over an object and change one properties value using native JS

Question

I want to be able to return a result set of data and just change the formatting of the date field to something more readable leaving all the other data intact. I would prefer to do this without a third party library.

Here is what I have so far:

//Get all the Tasks function getAllTasks() {   return models.gantt_tasks.findAll()   .then(function(tasks){      let results = tasks.map(task => task.start_date = task.start_date.format("YYYY-MM-DD"));     return results;   })   .catch(function(e) {     console.error(e);     return e;   }); } 

And I would like for the Map to complete before it returns the data.

Answer 1

You can use Object.assign(target, ...sources) (here) of which you want to change only one value by keeping other values intact.

For example:

const object1 = {  a: 1,  b: 2,  c: 3 }; 

Now suppose you want to change the value of b to 22, you can do this by:

const object2 = Object.assign({}, object1, {b: 22});  console.log(object1);  // { a: 1, b: 2, c: 3 }  console.log(object2);  // { a: 1, b: 22, c: 3 }  

Notice, this does not change the value of object1, it creates a new empty object as defined in the first parameter of Object.assign() and it adds further parameters to the empty object, and if it encounters the same key again then it updates the value of the key.

In this way you can change one or even multiple values of an Object.

A BETTER WAY

Airbnb's JavaScript Style Guide() {} says that:

Prefer the object spread operator over Object.assign to shallow-copy objects.

// very bad const original = { a: 1, b: 2 }; const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ delete copy.a; // so does this  // bad const original = { a: 1, b: 2 }; const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }  // good const original = { a: 1, b: 2 }; const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 } 

You can see the full documentation here

Answer 2

.map() isn't the usual way to modify properties an existing array of objects. You can do that, but it's not what .map() is normally used for. Instead, it's a way to create a new array. A .map() callback returns a value, and those returned values get pushed into a new array, which .map() finally returns.

Your .map() callback is implicitly returning task.start_date after assigning the formatted date into it. This means you're creating an array of formatted dates only, without the rest of the original task objects. If you wanted to use .map() here it would need to return task after making the assignment to task.start_date.

But instead you may want to use .forEach() in your .then() callback. This is the method made for this job: it simply iterates over the array and lets you modify each element in place:

tasks.forEach( task => task.start_date = task.start_date.format("YYYY-MM-DD") ); return tasks; 

Also, as Dustin mentioned, returning a value from .then() may not do what you want here. The safest bet would be to do something with tasks right there, or to call another function and pass tasks as an argument. (I'm a little rusty on promises, though...)