How to Move a Key in an Array of Objects using JavaScript?
The JavaScript array of objects is a type of array that contains JavaScript objects as its elements.
You can move or add a key to these types of arrays using the below methods in JavaScript:
Table of Content
Using Object Destructuring and Map()
This method uses the map() function along with object destructuring to generate an array of objects with the current key at a new place.
Example: The below code implements the above-discussed methods to move a key in an array of objects.
const array = [
{
name: 'John',
age: 30,
gender: 'male'
},
{
name: 'Alice',
age: 25,
gender: 'female'
},
{
name: 'Bob',
age: 35,
gender: 'male'
}
];
const newArray = array.map(
(obj, ind) => (
{
...obj,
['index']: ind
}));
console.log(newArray);
Output
[
{ name: 'John', age: 30, gender: 'male', index: 0 },
{ name: 'Alice', age: 25, gender: 'female', index: 1 },
{ name: 'Bob', age: 35, gender: 'male', index: 2 }
]
Using forEach() method
Loop through every item in the array using the forEach() method, and do it for every item move the key to the desired place.
Example: The below code implements the above-discussed methods to move a key in an array of objects.
const array = [
{
name: 'John',
age: 30,
gender: 'male'
},
{
name: 'Alice',
age: 25,
gender: 'female'
},
{
name: 'Bob',
age: 35,
gender: 'male'
}
];
const newArray = [];
array.forEach(
(obj, ind) => (
newArray.push({
...obj,
['index']: ind
})));
console.log(newArray);
Output
[
{ name: 'John', age: 30, gender: 'male', index: 0 },
{ name: 'Alice', age: 25, gender: 'female', index: 1 },
{ name: 'Bob', age: 35, gender: 'male', index: 2 }
]
Using for...of Loop
Navigate every object in the array of objects using a for...of loop, and create another object that puts the key at the desired position for each object in the array.
Example: The below code implements the above-discussed methods to move a key in an array of objects.
const array = [
{
name: 'John',
age: 30,
gender: 'male'
},
{
name: 'Alice',
age: 25,
gender: 'female'
},
{
name: 'Bob',
age: 35,
gender: 'male'
}
];
const newArray = [];
for (const [ind, obj] of
array.entries()) {
newArray.push(
{
...obj,
['index']: ind
});
}
console.log(newArray);
Output
[
{ name: 'John', age: 30, gender: 'male', index: 0 },
{ name: 'Alice', age: 25, gender: 'female', index: 1 },
{ name: 'Bob', age: 35, gender: 'male', index: 2 }
]
Using reduce() method
We can use the reduce() method to change the array of objects where the key will be moved to the required position within the objects.
Example: The below code implements the above-discussed methods to move a key in an array of objects.
const array = [
{
name: 'John',
age: 30,
gender: 'male'
},
{
name: 'Alice',
age: 25,
gender: 'female'
},
{
name: 'Bob',
age: 35,
gender: 'male'
}
];
const newArray = array.reduce(
(acc, obj, ind) => {
acc.push(
{
...obj,
['index']: ind
});
return acc;
}, []);
console.log(newArray);
Output
[
{ name: 'John', age: 30, gender: 'male', index: 0 },
{ name: 'Alice', age: 25, gender: 'female', index: 1 },
{ name: 'Bob', age: 35, gender: 'male', index: 2 }
]
Using for loop
The code moves a key within each object in an array by iterating with a `for` loop, checking for the old key, assigning its value to a new key, deleting the old key, and returning the modified array.
Example:
const arr = [
{ id: 1, name: 'Geeks', age: 25 },
{ id: 2, name: 'Geek', age: 30 },
{ id: 3, name: 'Geeks1', age: 20 }
];
const moveKey = (arr, oldKey, newKey) => {
for (let i = 0; i < arr.length; i++) {
if (arr[i].hasOwnProperty(oldKey)) {
arr[i][newKey] = arr[i][oldKey];
delete arr[i][oldKey];
}
}
return arr;
};
const newArr = moveKey(arr, 'name', 'fullName');
console.log(newArr);
Output
[
{ id: 1, age: 25, fullName: 'Geeks' },
{ id: 2, age: 30, fullName: 'Geek' },
{ id: 3, age: 20, fullName: 'Geeks1' }
]
Using Object.assign() and Array.map()
In this approach, we use Object.assign() in combination with Array.map() to create a new array of objects with the key moved to the desired position. This method constructs a new object for each element in the array, ensuring immutability and preserving the original array.
Example: The below code demonstrates how to move a key in an array of objects using Object.assign() and Array.map().
const moveKeyInArray = (arr, oldKey, newKey) => {
return arr.map(obj => {
let newObj = {};
Object.assign(newObj, obj); /
if (oldKey in newObj) {
newObj[newKey] = newObj[oldKey];
delete newObj[oldKey];
}
return newObj;
});
};
const data = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Doe', age: 22 }
];
const result = moveKeyInArray(data, 'name', 'fullName');
console.log(result);
Output
[
{ id: 1, age: 25, fullName: 'John' },
{ id: 2, age: 30, fullName: 'Jane' },
{ id: 3, age: 22, fullName: 'Doe' }
]
