Changing the keys of a nested object in an Array with JavaScript

Question

I need to change the keys of my object. I could use the map function to change the keys of my outer object. Question is, how can I access the inner object which is in an array as well. In the code below, I need to change the team key to teamName. My structure has to be in the same order.

let myArray = [
  {
    id: 1,
    name: "foo",
    Organization: [{ team: "value1" }, { location: "value2" }],
  },
  {
    id: 2,
    name: "foo",
    Organization: [{ team: "value1" }, { location: "value2" }],
  },
];

I can change the keys of the outer array like this if I want to change id to userId.

const newArray = myArray.map((item) => {
  return {
    userId: item.id,
  };
});

But trying to change the keys in the inner list of objects for Organization becomes a problem. What is the best way to modify the inner keys?

There's no difference between an "inner" and "outer" array. Array is array. — Andreas
– Andreas, Commented Oct 8, 2021 at 16:03

Barak · Accepted Answer · 2021-10-08 16:26:59Z

2

Option 1 - lodash mapKeys

import { mapKeys } from 'lodash';

const newArray = myArray.map(item => ({
  ...item,
  Organization: item.Organization.map(org =>
    mapKeys(org, (_, key) => (key === 'team' ? 'teamName' : key))
  ),
}));

Option 2 - object destruction

You can destruct each Organization and reconstruct it with teamName, as long as team exists.

const newArray = myArray.map(item => ({
  ...item,
  Organization: item.Organization.map(({ team, ...rest }) =>
    Object.assign(rest, team ? { teamName: team } : {})
  ),
}));

Result

[
  {
    id: 1,
    name: 'foo',
    Organization: [{ teamName: 'value1' }, { location: 'value2' }],
  },
  {
    id: 2,
    name: 'foo',
    Organization: [{ teamName: 'value1' }, { location: 'value2' }],
  },
];

answered Oct 8, 2021 at 16:26

Barak

1,42716 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

3limin4t0r · Accepted Answer · 2021-10-08 17:22:49Z

If Organization is always an array with 2 elements. Where the first element is an object with the property team, and the second element is an object with the property location. Then the following code does job.

let myArray = [{
  "id": 1,
  "name": "foo",
  "Organization": [{"team": "value1"}, {"location": "value2"}]
}, {
  "id": 2,
  "name": "foo",
  "Organization": [{"team": "value1"}, {"location": "value2"}]
}];

const result = myArray.map((item) => {
  const [{ team: teamName }, location] = item.Organization;
  return { ...item, Organization: [{ teamName }, location] };
});

console.log(result);

This answer makes use of destructuring assignment. If you don't know what this is I would highly suggest checking out the linked documentation.

Dharman · Accepted Answer · 2021-10-08 17:47:55Z

1

Couldn't make it more simpler.

console.log(
  [{
      "id": 1,
      "name": "foo",
      "Organization": [{
        "team": "value1"
      }, {
        "location": "value2"
      }]
    },
    {
      "id": 2,
      "name": "foo",
      "Organization": [{
        "team": "value1"
      }, {
        "location": "value2"
      }]
    },
  ].reduce((a, b) => {
    b.Organization[0] = {
      teamName: b.Organization[0].team
    }
    a.push(b)
    return a
  }, [])
)

edited Oct 8, 2021 at 17:47

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Oct 8, 2021 at 17:42

Siddharth

6377 silver badges17 bronze badges

Collectives™ on Stack Overflow

Changing the keys of a nested object in an Array with JavaScript

3 Answers 3

Option 1 - lodash mapKeys

Option 2 - object destruction

Result

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Option 1 - lodash mapKeys

Option 2 - object destruction

Result

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related