Click here to Skip to main content
15,075,492 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello, I'm having issues writing the following function:
Quote:
Write a function called addKeyAndValue which accepts an array of objects, a key, and a value and returns the array passed to the function with the new key and value added for each object

Examples:
JavaScript
addKeyAndValue([{name: ‘Elie’}, {name: ‘Tim’}, {name: ‘Matt’}, {name: ‘Colt’}], ‘title’, ‘instructor’)
// [{name: ‘Elie’, title:‘instructor’}, {name: ‘Tim’, title:‘instructor’}, {name: ‘Matt’, title:‘instructor’}, {name: ‘Colt’, title:‘instructor’}]

so I tried the following, but it does not seem to work. any hints of how I might resolve it?

What I have tried:

JavaScript
const addKeyAndValue = (arr,key,value) => {
    arr.map(obj => { 
        obj[key] = value;
    })
};

console.log(addKeyAndValue([{name: 'Fede'},{name:'Nico'},{name:'Paula'}], 'Country', 'Argentina'));
Posted
Updated 21-Jan-21 6:59am
v2

JavaScript
function addKeyAndValue(arr, key, value) {
for (i = 0; i < arr.length; i++) {
  obj = arr[i];
  obj[key] = value;
}
return arr;
}
   
The first problem is that your addKeyAndValue function doesn't return anything. Remove the redundant braces to make it return the results of the map function.
JavaScript
const addKeyAndValue = (arr, key, value) => arr.map(obj => ...);
The second problem is that the arrow function you've passed to map also doesn't return anything. You will end up with an array containing the same number of elements, but each element will be undefined. Make the arrow function return something:
JavaScript
arr.map(obj => {
    obj[key] = value;
    return obj;
});
Demo[^]

However, as you can see from the demo, although map returns a new array, it's only a shallow copy. Your new property is added to the elements in the source array as well, since they're pointing to the same objects.

If you don't want to modify the elements in the source array, you will need to copy them. The simplest option is probably to use the spread operator:
JavaScript
arr.map(obj => ({ ...obj, [key]: value}));
Demo[^]
Spread syntax (...) - JavaScript | MDN[^]
   
Comments
Richard MacCutchan 21-Jan-21 4:51am
   
In the call to arr.map, why does it need to return the object each time? Doesn't it modify them in place?
Richard Deeming 21-Jan-21 5:00am
   
No, the value returned by the callback function gets added to the new array.
Array.prototype.map() - JavaScript | MDN[^]

If you don't return the value, the source array will be updated as expected, but the returned array will not contain any values.
Richard MacCutchan 21-Jan-21 7:24am
   
Thanks, a second reading of the documentation was needed.
Federico Arnaudo 21-Jan-21 12:55pm
   
Thanks for your feedback. Helped me to clarify a few things!
const names = [
{name: 'Elie'},
{name: 'Tim'},
{name: 'Matt'},
{name: 'Colt'}
]
const addKeyAndValue = (arr, key, value) => {
arr.forEach(object => {
object[key] = value
})
console.log(arr)
return arr
}
addKeyAndValue(names, 'title', 'instructor')
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900