Updating the names of keys within an object that includes nested child objects

Question

Updating the names of keys within an object that includes nested child objects

I am looking to update the keys in an object that contains nested objects with similar structures.

Initially, my object looks like this:

objs = {
   "one":{
      "title":"bla",
      "amount":5,
      "children":[
         {
            "title":"bla",
            "identifier":"some text"
         },
         {
            "title":"bla2",
            "identifier":"some text2"
         }
      ]
   },
   "two":{
      "title":"bla",
      "amount":5,
      "children":[
         {
            "title":"bla",
            "identifier":"some text"
         },
         {
            "title":"bla2",
            "identifier":"some text2"
         }
      ]
   }
}

and I want to transform it into this:

objs = {
   "one":{
      "text":"bla",
      "amount":5,
      "items":[
         {
            "text":"bla",
            "identifier":"some text"
         },
         {
            "text":"bla2",
            "identifier":"some text2"
         }
      ]
   },
   "two":{
      "text":"bla",
      "amount":5,
      "items":[
         {
            "text":"bla",
            "identifier":"some text"
         },
         {
            "text":"bla2",
            "identifier":"some text2"
         }
      ]
   }
}

My goal is to rename every key children to items and every key title to text, regardless of how deeply nested the objects are. I have attempted using

spread & Destructuring Assignment

in forEach loops, but encountered challenges.

javascript json ecmascript-6

Answer 1

Answer №1

Here is a potential solution:

var objects = {
   "one":{
      "title":"example",
      "quantity":5,
      "children":[
         {
            "title":"example",
            "identifier":"some text"
         },
         {
            "title":"example2",
            "identifier":"some text2"
         }
      ]
   },
   "two":{
      "title":"example",
      "quantity":5,
      "children":[
         {
            "title":"example",
            "identifier":"some text"
         },
         {
            "title":"example2",
            "identifier":"some text2"
         }
      ]
   }
};



function transformObject(_object){
var output = [];
for(var key in _object){
var newObject = {};
for(var property in _object[key]){
  if(property == 'children'){
            newObject['items'] = transformObject(_object[key][property]);
  }else if(property == 'title'){
             newObject['text'] = _object[key][property];
  }else{
  newObject[property] = _object[key][property];
  }

        }
        output.push(newObject);
}
return output;
}

console.log(transformObject(objects));

Answer 2

Here is a potential solution:

var objects = {
   "one":{
      "title":"example",
      "quantity":5,
      "children":[
         {
            "title":"example",
            "identifier":"some text"
         },
         {
            "title":"example2",
            "identifier":"some text2"
         }
      ]
   },
   "two":{
      "title":"example",
      "quantity":5,
      "children":[
         {
            "title":"example",
            "identifier":"some text"
         },
         {
            "title":"example2",
            "identifier":"some text2"
         }
      ]
   }
};



function transformObject(_object){
var output = [];
for(var key in _object){
var newObject = {};
for(var property in _object[key]){
  if(property == 'children'){
            newObject['items'] = transformObject(_object[key][property]);
  }else if(property == 'title'){
             newObject['text'] = _object[key][property];
  }else{
  newObject[property] = _object[key][property];
  }

        }
        output.push(newObject);
}
return output;
}

console.log(transformObject(objects));

Answer 3

Answer №2

To change the name, you can't simply rename it but you can assign a new value in the following way:

Object.keys(objects)
    .filter(k => objects[k].children)
    .forEach(k => { 
        objects[k].items = objects[k].children; 
        delete objects[k].children; 
    });

Answer 4

To change the name, you can't simply rename it but you can assign a new value in the following way:

Object.keys(objects)
    .filter(k => objects[k].children)
    .forEach(k => { 
        objects[k].items = objects[k].children; 
        delete objects[k].children; 
    });

Answer 5

Answer №3

Are you considering changing the name from children to items? If so, here are a couple of options for achieving this using JavaScript.

const objs = {
   "one":{
      "title":"bla",
      "amount":5,
      "children":[
         {
            "title":"bla",
            "identifier":"some text"
         },
         {
            "title":"bla2",
            "identifier":"some text2"
         }
      ]
   },
   "two":{
      "title":"bla",
      "amount":5,
      "children":[
         {
            "title":"bla",
            "identifier":"some text"
         },
         {
            "title":"bla2",
            "identifier":"some text2"
         }
      ]
   }
};


for (const obj in objs) {
  objs[obj].items = objs[obj].children;
  delete objs[obj].items;
}

console.log(objs);

Alternatively

const objs = {
   "one":{
      "title":"bla",
      "amount":5,
      "children":[
         {
            "title":"bla",
            "identifier":"some text"
         },
         {
            "title":"bla2",
            "identifier":"some text2"
         }
      ]
   },
   "two":{
      "title":"bla",
      "amount":5,
      "children":[
         {
            "title":"bla",
            "identifier":"some text"
         },
         {
            "title":"bla2",
            "identifier":"some text2"
         }
      ]
   }
};

const newObjs = Object.keys(objs).reduce( (acc, curr) => {
  const updatedObj = { ...objs[curr], items: objs[curr].children };
  delete updatedObj.children
  acc[curr] = { ...updatedObj };
  return acc;
}, {});

console.log(newObjs)

Answer 6

Are you considering changing the name from children to items? If so, here are a couple of options for achieving this using JavaScript.

const objs = {
   "one":{
      "title":"bla",
      "amount":5,
      "children":[
         {
            "title":"bla",
            "identifier":"some text"
         },
         {
            "title":"bla2",
            "identifier":"some text2"
         }
      ]
   },
   "two":{
      "title":"bla",
      "amount":5,
      "children":[
         {
            "title":"bla",
            "identifier":"some text"
         },
         {
            "title":"bla2",
            "identifier":"some text2"
         }
      ]
   }
};


for (const obj in objs) {
  objs[obj].items = objs[obj].children;
  delete objs[obj].items;
}

console.log(objs);

Alternatively

const objs = {
   "one":{
      "title":"bla",
      "amount":5,
      "children":[
         {
            "title":"bla",
            "identifier":"some text"
         },
         {
            "title":"bla2",
            "identifier":"some text2"
         }
      ]
   },
   "two":{
      "title":"bla",
      "amount":5,
      "children":[
         {
            "title":"bla",
            "identifier":"some text"
         },
         {
            "title":"bla2",
            "identifier":"some text2"
         }
      ]
   }
};

const newObjs = Object.keys(objs).reduce( (acc, curr) => {
  const updatedObj = { ...objs[curr], items: objs[curr].children };
  delete updatedObj.children
  acc[curr] = { ...updatedObj };
  return acc;
}, {});

console.log(newObjs)

Answer 7

Answer №4

Below is a simple recursive map function that I created in one of my recent answers on Stack Overflow -

const map = (fk = identity, fv = identity, x = null) =>
  Array.isArray(x)
    ? x.map(v => map(fk, fv, v))
: Object(x) === x
    ? Object.fromEntries(
        Object.entries(x).map(([ k, v ]) =>
          [ fk(k)
          , map(fk, fv, v)
          ] 
        )
      )
: fv(x)

Higher-order functions have many practical applications as demonstrated below -

const keyReplacer = (k = "") =>
{ if (k === "title") return "text"
  if (k === "children") return "items"
  else return k
}

const objs = // <-- don't forget const keyword
  { ... }

const result =
  map(keyReplacer, identity, objs)

// => ...

Execute the code snippet to observe the results -

const identity = x =>
  x
  
const map = (fk = identity, fv = identity, x = null) =>
  Array.isArray(x)
    ? x.map(v => map(fk, fv, v))
: Object(x) === x
    ? Object.fromEntries(
        Object.entries(x).map(([ k, v ]) =>
          [ fk(k)
          , map(fk, fv, v)
          ] 
        )
      )
: fv(x)

const objs = // <-- don't forget const keyword
  {one:{title:"bla",amount:5,children:[{title:"bla",identifier:"some text"},{title:"bla2",identifier:"some text2"}]},two:{title:"bla",amount:5,children:[{title:"bla",identifier:"some text"},{title:"bla2",identifier:"some text2"}]}}

const keyReplacer = (k = "") =>
{ if (k === "title") return "text"
  if (k === "children") return "items"
  else return k
}

const result =
  map(keyReplacer, identity, objs)

console.log(result)

A potential enhancement to this could involve replacing the linear stack of if statements with a more efficient logarithmic dictionary look-up method -

const keyReplacer = (dict = {}) => (k = "") =>
{ const r = dict[k]
  return r === undefined ? k : r
}

const replacements = 
  { title: "text", children: "items" }

const result =
  map(keyReplacer(replacements), identity, objs)

Answer 8

Below is a simple recursive map function that I created in one of my recent answers on Stack Overflow -

const map = (fk = identity, fv = identity, x = null) =>
  Array.isArray(x)
    ? x.map(v => map(fk, fv, v))
: Object(x) === x
    ? Object.fromEntries(
        Object.entries(x).map(([ k, v ]) =>
          [ fk(k)
          , map(fk, fv, v)
          ] 
        )
      )
: fv(x)

Higher-order functions have many practical applications as demonstrated below -

const keyReplacer = (k = "") =>
{ if (k === "title") return "text"
  if (k === "children") return "items"
  else return k
}

const objs = // <-- don't forget const keyword
  { ... }

const result =
  map(keyReplacer, identity, objs)

// => ...

Execute the code snippet to observe the results -

const identity = x =>
  x
  
const map = (fk = identity, fv = identity, x = null) =>
  Array.isArray(x)
    ? x.map(v => map(fk, fv, v))
: Object(x) === x
    ? Object.fromEntries(
        Object.entries(x).map(([ k, v ]) =>
          [ fk(k)
          , map(fk, fv, v)
          ] 
        )
      )
: fv(x)

const objs = // <-- don't forget const keyword
  {one:{title:"bla",amount:5,children:[{title:"bla",identifier:"some text"},{title:"bla2",identifier:"some text2"}]},two:{title:"bla",amount:5,children:[{title:"bla",identifier:"some text"},{title:"bla2",identifier:"some text2"}]}}

const keyReplacer = (k = "") =>
{ if (k === "title") return "text"
  if (k === "children") return "items"
  else return k
}

const result =
  map(keyReplacer, identity, objs)

console.log(result)

A potential enhancement to this could involve replacing the linear stack of if statements with a more efficient logarithmic dictionary look-up method -

const keyReplacer = (dict = {}) => (k = "") =>
{ const r = dict[k]
  return r === undefined ? k : r
}

const replacements = 
  { title: "text", children: "items" }

const result =
  map(keyReplacer(replacements), identity, objs)

Updating the names of keys within an object that includes nested child objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The click function for the responsive navbar hamburger is not functioning properly

Encountered an issue while attempting to run the npm run serve command on a

Tips on extracting information from a single JSON object response

Performing mathematical calculations with numerical values

The Angular date picker is overly verbose in its data output regarding selected dates and requires optimization

Here's a new version: "Utilizing boost::property_tree json to transform values into objects and append members."

How can you make an element appear when clicking and then disappear with a second click?

Ways to send users to a different page with parameters without relying on cookies

Transform a JSON array into the jQuery array syntax

I'm facing an issue with my GraphQL resolvers due to a circular dependency

Can qTip 2.0 be configured to use a different default attribute instead of 'title'?

Is there a way to eliminate the default bootstrap stylings?

Safari encountering parsing date error

JavaScript/jQuery countdown timer failing to initialize properly

What is the best way to extract data from a JSON Instance in Flutter?

Ajax requests are returning successful responses for GET and POST methods, however, no response is being received for

Activate a button by simulating a click event through a shortcut key with the help of a

Preventing a JavaScript timer function from executing multiple times when triggered by an 'in viewport' function

Experiencing difficulties posting on route due to receiving an undefined object instead of the expected callback in Node Js

"Set a timeout for an HTML markup to be displayed in an AJAX