Substitute the nested object's value with a variable structure

Question

Substitute the nested object's value with a variable structure

I have an object structured like this:

const obj = {a: {x: 0, y: 0}}

but it can also be structured like this:

const obj = {a: {x: 0, y: 0}, b: {x: 10, y: 3}, abcd: {x: -1, y: 0}}

This means that the obj can contain multiple keys with variable key names. I want to replace each x value with a string in the format ${x}%, where x is the original value followed by a percentage symbol.

How can I achieve this transformation?

The expected output should look like:

const obj = {a: {x: 0, y: 0}} // {a: {x: '0%', y: 0}}
const obj = {a: {x: 0, y: 0}, b: {x: 10, y: 3}, abcd: {x: -1, y: 0}} // {a: {x: '0%', y: 0}, b: {x: '10%', y: 3}, abcd: {x: '-1%', y: 0}}

I attempted looping through the object but I'm unsure if there is a more efficient solution available.

javascript

Answer 1

Answer №1

const myObj = {a: {x: 0, y: 0}, b: {x: 10, y: 3}, abcd: {x: -1, y: 0}}

let updatedObj = Object.fromEntries(Object.entries(myObj).map(([key,value]) => {
    return [key,{...value,x:`${value.x}%`}]
}))

console.log(updatedObj)

Answer 2

const myObj = {a: {x: 0, y: 0}, b: {x: 10, y: 3}, abcd: {x: -1, y: 0}}

let updatedObj = Object.fromEntries(Object.entries(myObj).map(([key,value]) => {
    return [key,{...value,x:`${value.x}%`}]
}))

console.log(updatedObj)

Answer 3

Answer №2

Exploring the object recursively is another approach. This method ensures that every matching key receives a corresponding suffix, regardless of the depth of the object.

To maintain the integrity of the original object(s), I always create a duplicate before processing any modifications.

const obj = {a: {x: 0, y: 0}, b: {x: 10, y: 3}, abcd: {x: -1, y: 0}};

const addSuffixToObj = (obj, key, suffix) => {
  const copy = {...obj};

  Object.keys(copy).forEach((prop) => {
    if (typeof copy[prop] === 'object') {
      copy[prop] = addSuffixToObj(copy[prop], key, suffix);
    }else if(prop === key){
      copy[prop] = copy[prop] + suffix;
    }
  });
  
  return copy;
}

// Append "%" to all "x" keys
const result = addSuffixToObj(obj, 'x', '%');

console.log(result);

Answer 4

Exploring the object recursively is another approach. This method ensures that every matching key receives a corresponding suffix, regardless of the depth of the object.

To maintain the integrity of the original object(s), I always create a duplicate before processing any modifications.

const obj = {a: {x: 0, y: 0}, b: {x: 10, y: 3}, abcd: {x: -1, y: 0}};

const addSuffixToObj = (obj, key, suffix) => {
  const copy = {...obj};

  Object.keys(copy).forEach((prop) => {
    if (typeof copy[prop] === 'object') {
      copy[prop] = addSuffixToObj(copy[prop], key, suffix);
    }else if(prop === key){
      copy[prop] = copy[prop] + suffix;
    }
  });
  
  return copy;
}

// Append "%" to all "x" keys
const result = addSuffixToObj(obj, 'x', '%');

console.log(result);

Answer 5

Answer №3

If you want to modify the values of object keys, one way to do it is by getting the array of object keys and then using the forEach method. This method executes a provided function for every element of the array, in this case - for every object key:

Object.keys(obj).forEach(element => obj[element].value = `${obj[element].value}%`)

Answer 6

If you want to modify the values of object keys, one way to do it is by getting the array of object keys and then using the forEach method. This method executes a provided function for every element of the array, in this case - for every object key:

Object.keys(obj).forEach(element => obj[element].value = `${obj[element].value}%`)

Substitute the nested object's value with a variable structure

Answer №1

Answer №2

Answer №3

Similar questions

Tips for saving an array from the server into a script variable

The component encounters a transformation in which prop values shift to undefined

Creating seamless online payments using Stripe and Bootstrap

Eliminate Video Time Indicator

Trigger a warning pop-up if a selection has not been made in a dropdown menu using jQuery

I am currently working on creating a navigation bar for a webpage using the express framework and pug library. However, when I navigate to the demo page endpoint, the screen appears blank and nothing is displayed

Creating a menu header similar to Gmail's design is a great way to

Proper method for retrieving and displaying information from a targeted JSON through an API

Export all entries without taking into account pagination limits

JQuery Mobile: Adding fresh, dynamic content - CSS fails to take effect

Is there a way to modify the log() function to handle multiple arguments?

There seems to be an issue with AJAX file uploading functionality in Django

Struggling to transfer the loaded data into the corresponding text fields for display

Issue: Query is not re-executing after navigatingDescription: The query is

What can be done to resolve the error message "This language feature is only supported for ECMASCRIPT6 mode" in Google Tag Manager?

Can you choose and generate identical values using react-select?

Mastering EmberJS 2.7: The Definitive Guide to Binding the 'disabled' Attribute for Buttons

Can I use JavaScript to generate an element similar to <ion-icon name="heart"></ion-icon>?

What is the most efficient method for adding each unique unordered list element with a specific class to the nearest parent article tag

Retrieve data using $http.get when an accordion group is expanded in AngularJS