Javascript - Change name of all object keys in nested arrays

Question

This is the array i get:

const packages = [
  {
    id: '641a1690-6c8b-4ada-ae97-8d82cc4fe7a3',
    name: 'com.sample',
    children: {
      id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f',
      name: 'child.computer.com',
      children: { id: 'e4ab-4a86-0f66cc32f560', name: 'child.com' }
    }
  },
  { id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f560', name: 'computer.com' },
  { id: 'ca7f972e-64ee-4cb0-80b9-1036fac69d32', name: 'java.util' }
];

So, it is an array of objects, and each object can have children, which again have id, name and possibly children (children is optional), and so on, it can be nested X times. I want to change key names, id to key, name to title and children will remain children. So, my problem is that i don't know how to change keys inside children, i just change the first level and that is all.. It should be like:

{
    key: '641a1690-6c8b-4ada-ae97-8d82cc4fe7a3',
    title: 'com.sample',
    children: {
      key: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f',
      title: 'child.computer.com',
      children: { key: 'e4ab-4a86-0f66cc32f560', title: 'child.com' }
    }   
}

Have you tried anything? Try reading map in array

Shubham Verma
– Shubham Verma

2020-10-30 11:37:56 +00:00
Commented Oct 30, 2020 at 11:37 — Shubham Verma
– Shubham Verma, Commented Oct 30, 2020 at 11:37

Amardeep Bhowmick · Accepted Answer · 2020-10-30 12:03:28Z

4

You can do this by using Recursion.

Check if the value of the [key-value] pair from the Object#entries() call is an object.

If so, call the transformObj function again recursively for that value. Else return the value as is.

And finally convert the array of [key-value] pairs back to an object by using Object#fromEntries:

const packages = [{ id: '641a1690-6c8b-4ada-ae97-8d82cc4fe7a3', name: 'com.sample', children: { id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f', name: 'child.computer.com', children: { id: 'e4ab-4a86-0f66cc32f560', name: 'child.com' }}}, { id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f560', name: 'computer.com' }, { id: 'ca7f972e-64ee-4cb0-80b9-1036fac69d32', name: 'java.util' }];
const replacer = { "id": "key", "name" :"title"};
const transformObj = (obj) => {
  if(obj && Object.getPrototypeOf(obj) === Object.prototype){
    return Object.fromEntries(
    Object.entries(obj)
          .map(([k, v]) => [replacer[k] || k, transformObj(v)])
    );
  }
  //Base case, if not an Object literal return value as is
  return obj;
}
console.log(packages.map(o => transformObj(o)));

edited Oct 30, 2020 at 12:03

answered Oct 30, 2020 at 11:47

Amardeep Bhowmick

17k3 gold badges33 silver badges46 bronze badges

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

2 Comments

Richard Rublev Over a year ago

Why if(obj && Object.getPrototypeOf(obj) === Object.prototype) check was necessary?

Amardeep Bhowmick Over a year ago

@RichardRublev check if the value is a nested object, if so we need to recursively transform the nested object as well. If it is a string or a number then we do not bother transforming.

Olli · Accepted Answer · 2020-10-30 12:07:12Z

2

You can try to go through every object inside your array and recursively iterate through its keys. Then you can change the keys you want to change and iterate further through the childrens key.

const packages = [{id: '641a1690-6c8b-4ada-ae97-8d82cc4fe7a3',name:'com.sample',children: {id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f',name: 'child.computer.com',children: { id: 'e4ab-4a86-0f66cc32f560', name: 'child.com' }}},{ id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f560', name: 'computer.com' },{ id: 'ca7f972e-64ee-4cb0-80b9-1036fac69d32', name: 'java.util' }];

const renameNestedObjects = (obj) => {
    Object.keys(obj).forEach((key, index) => {
    if (key == "id") {
      obj["key"] = obj["id"];
      delete obj["id"];
    }
    if (key == "name") {
      obj["title"] = obj["name"];
      delete obj["name"];
    }
    if (key == "children") {
        renameNestedObjects(obj["children"]);
    }
  });
}

console.log(packages);
packages.forEach(obj => { renameNestedObjects(obj); });
console.log(packages);

edited Oct 30, 2020 at 12:07

answered Oct 30, 2020 at 12:01

Olli

6961 gold badge7 silver badges30 bronze badges

1 Comment

Jelena R Over a year ago

this also works, although i have chosen the first answer because it is more dynamic, but thank you a lot!

Vasilii · Accepted Answer · 2023-08-18 03:47:17Z

In my case, the solution of Fullstack Guy was good only for one-level transformation. Same for Olli's solution. So for deep transformation the solution of Olli should be like this:

const renameNestedObjects = (obj) => {
        Object.keys(obj).forEach((key, index) => {
          if (key == 'id') {
            obj['key'] = obj['id'];
            delete obj['id'];
          }
          if (key == 'name') {
            obj['title'] = obj['name'];
            delete obj['name'];
          }
          if (key == 'children') {
            obj['children'].forEach((children) => renameNestedObjects(children));
          }
        });
      };

And if your initial array of objects is not extensible you may consider using this:

arrayOfObjects = JSON.parse(JSON.stringify(initialIncomingNotExtensibleArrayOfObjects);

and after that to apply suggested transformation to this new arrayOfObjects.

Collectives™ on Stack Overflow

Javascript - Change name of all object keys in nested arrays

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related