How to change all occurrences of an object key in an array of objects

Question

I have this sample data:

const data = [
  {
    id: 1,
    title: 'Sports',
    menus: [
      {
        id: 2,
        title: 'Basketball',
        menus: [
          {
            id: 3,
            title: 'NBA',
          },
          {
            id: 4,
            title: 'NCAA',
          },
          {
            id: 5,
            title: 'G-League',
          },
        ],
      },
    ],
  },
  {
    id: 100,
    title: 'Names',
    menus: [],
  },
];

I want to change all the menus keys into children, so the result would be:

const result = [
  {
    id: 1,
    title: 'Sports',
    children: [
      {
        id: 2,
        title: 'Basketball',
        children: [
          {
            id: 3,
            title: 'NBA',
          },
          {
            id: 4,
            title: 'NCAA',
          },
          {
            id: 5,
            title: 'G-League',
          },
        ],
      },
    ],
  },
  {
    id: 100,
    title: 'Names',
    children: [],
  },
];

I'm trying with this code:

const replacer = { menus: 'children' };
const transform = useCallback(
    (obj) => {
      if (obj && Object.getPrototypeOf(obj) === Object.prototype) {
        return Object.fromEntries(Object.entries(obj).map(([k, v]) => [replacer[k] || k, transform(v)]));
      }
      return obj;
    },
    [replacer]
  );

but it only changes the keys at the first level. How can I make it work?

trincot · Accepted Answer · 2021-03-03 12:28:29Z

You can use a recursive function that makes use of destructuring:

const  replaceKey = arr => 
    arr.map(({menus, ...o}) => 
        menus ? {...o, children: replaceKey(menus)} : o);

const data = [{id: 1,title: 'Sports',menus: [{id: 2,title: 'Basketball',menus: [{id: 3,title: 'NBA',},{id: 4,title: 'NCAA',},{id: 5,title: 'G-League',},],},],},{id: 100,title: 'Names',menus: [],},];

console.log(replaceKey(data));

To provide the old/new key dynamically, use the following variant:

const  replaceKey = (arr, source, target) =>
    arr.map(({[source]: v, ...o}) =>
        v ? {...o, [target]: replaceKey(v, source, target)} : o);

const data = [{id: 1,title: 'Sports',menus: [{id: 2,title: 'Basketball',menus: [{id: 3,title: 'NBA',},{id: 4,title: 'NCAA',},{id: 5,title: 'G-League',},],},],},{id: 100,title: 'Names',menus: [],},];

console.log(replaceKey(data, "menus", "children"));

This code assumes that values for the given key are arrays. If for some reason their values could be something else, then the code needs a bit more extension:

const data = [{id: 1,title: 'Sports',menus: [{id: 2,title: 'Basketball',menus: [{id: 3,title: 'NBA',},{id: 4,title: 'NCAA',},{id: 5,title: 'G-League',},],},],},{id: 100,title: 'Names',menus: 13,},];

const  replaceKey = (arr, source, target) =>
    Array.isArray(arr) ? arr.map(({[source]: value, ...o}) =>
        value !== undefined ? {...o, [target]: replaceKey(value, source, target)} : o
    ) : arr;

console.log(replaceKey(data, "menus", "children"));

To see the effect of this code, the value for the very last menus key was changed to 13.

mplungjan · Accepted Answer · 2021-03-03 11:58:16Z

0

If the object is not big:

let data=[{id:1,title:'Sports',menus:[{id:2,title:'Basketball',menus:[{id:3,title:'NBA',},{id:4,title:'NCAA',},{id:5,title:'G-League',},],},],},{id:100,title:'Names',menus:[],},];

data = JSON.parse(JSON.stringify(data).replace(/"menus"\:/g,'"children":'))
console.log(data)

answered Mar 3, 2021 at 11:58

mplungjan

180k29 gold badges183 silver badges246 bronze badges

1 Comment

ajbee Over a year ago

not possible since the object will be large.

Muhammed Moussa · Accepted Answer · 2021-03-03 12:15:11Z

0

check this package: paix:
that's take original source object and desired keys replacement then return a new object with desired keys, ex:

npm i paix

import { paix } from 'paix';

const data = [
  {
    id: 1,
    title: 'Sports',
    menus: [
      {
        id: 2,
        title: 'Basketball',
        menus: [
          {
            id: 3,
            title: 'NBA',
          },
        ],
      },
    ],
  },
  {
    id: 100,
    title: 'Names',
    menus: [],
  },
];
                   
const keys_swap = {menus: "children"};
const result = data.map(i => paix(i, keys_swap));

answered Mar 3, 2021 at 12:15

Muhammed Moussa

5,2471 gold badge39 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to change all occurrences of an object key in an array of objects

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related