Adjusting an item according to a specified pathway

Question

Adjusting an item according to a specified pathway

I am currently working on dynamically modifying an object based on a given path, but I am encountering some difficulties in the process. I have managed to create a method that retrieves values at a specified path, and now I need to update values at that path. The length of the path should not be a limiting factor, so using prop.prop.prop.prop should still work. For instance:

let dataObj = {
  name: 'Old Name',
  address: {
    state: 'CA',
    timezone: 'America/California'
  }
}

let modifiedValues = {
  'name': 'New Name'
  'address.state': 'FL',
  'address.timezone': 'America/New_York'
}

My goal is to iterate over the second object and utilize the key-value pairs to either update the first object directly or construct a new object with the same structure. Ultimately, I aim to achieve an object as follows:

let dataObj = {
  name: 'New Name',
  address: {
    state: 'FL',
    timezone: 'America/New_York'
  }
}

Additionally, below is the method I currently have for retrieving a value based on a provided path:

getAttributeFromPath(path: string, entity: any): any {
  return path.split('.').reduce((a, b) => a && a[b], entity);
}

javascript typescript

Answer 1

Answer №1

If you want to modify the first object by setting an attribute from a path, you can create a customized version of getAttributeFromPath.

I have demonstrated this with a function called setAttributeFromPath, using forEach instead of reduce:

let dataObj = {
  name: 'Old Name',
  address: {
    state: 'CA',
    timezone: 'America/California'
  }
};

let modifiedValues = {
  'name': 'New Name',
  'address.state': 'FL',
  'address.timezone': 'America/New_York'
};

const setAttributeFromPath = (path, entity, value) => {
  const pathParts = path.split('.');
  let obj = entity;
  
  pathParts.forEach((part, index) => {
    if (obj[part]) {
      if (index < pathParts.length - 1) {
        obj = obj[part];
      } else {
        obj[part] = value;
      }
    }
  });
};

Object.entries(modifiedValues).forEach(([key, value]) => {
  setAttributeFromPath(key, dataObj, value);
});

console.log(dataObj);

You may wish to try crafting a more concise one-liner form of setAttributeFromPath using reduce.

Answer 2

If you want to modify the first object by setting an attribute from a path, you can create a customized version of getAttributeFromPath.

I have demonstrated this with a function called setAttributeFromPath, using forEach instead of reduce:

let dataObj = {
  name: 'Old Name',
  address: {
    state: 'CA',
    timezone: 'America/California'
  }
};

let modifiedValues = {
  'name': 'New Name',
  'address.state': 'FL',
  'address.timezone': 'America/New_York'
};

const setAttributeFromPath = (path, entity, value) => {
  const pathParts = path.split('.');
  let obj = entity;
  
  pathParts.forEach((part, index) => {
    if (obj[part]) {
      if (index < pathParts.length - 1) {
        obj = obj[part];
      } else {
        obj[part] = value;
      }
    }
  });
};

Object.entries(modifiedValues).forEach(([key, value]) => {
  setAttributeFromPath(key, dataObj, value);
});

console.log(dataObj);

You may wish to try crafting a more concise one-liner form of setAttributeFromPath using reduce.

Answer 3

Answer №2

For this task, you can utilize the eval function. All you have to do is loop through your modified values and update them accordingly.

let originalData = {
  title: 'Old Title',
  info: {
    category: 'Tech',
    rating: '5 stars'
  }
}

let updatedValues = {
  'title': 'New Title',
  'info.category': 'Business',
  'info.rating': '4 stars'
}

function modifyObject(values, object){
    Object.keys(values).forEach( property => {
        eval(`object.${property} = values[property]`);
    });
}

modifyObject(updatedValues, originalData);
console.log(originalData);

Answer 4

For this task, you can utilize the eval function. All you have to do is loop through your modified values and update them accordingly.

let originalData = {
  title: 'Old Title',
  info: {
    category: 'Tech',
    rating: '5 stars'
  }
}

let updatedValues = {
  'title': 'New Title',
  'info.category': 'Business',
  'info.rating': '4 stars'
}

function modifyObject(values, object){
    Object.keys(values).forEach( property => {
        eval(`object.${property} = values[property]`);
    });
}

modifyObject(updatedValues, originalData);
console.log(originalData);

Answer 5

Answer №3

To efficiently organize your data, iterate through each item and check for any values that have a dotted structure. Then, construct a new object with the updated layout:

let revisedValues = {
    'name': 'Brand New Name',
    'address.state': 'California',
    'address.timezone': 'America/Los_Angeles'
};

let formattedValues = {};
for(let entry in revisedValues){
    if(entry.includes('.')){
        let separated = entry.split('.');
        if(separated[0] in formattedValues)
            formattedValues[separated[0]][separated[1]] = revisedValues[entry];
        else{
            formattedValues[separated[0]] = {};
            formattedValues[separated[0]][separated[1]] = revisedValues[entry];
        }
    }else{
        formattedValues[entry] = revisedValues[entry];
    }
}
console.log(formattedValues);

Answer 6

To efficiently organize your data, iterate through each item and check for any values that have a dotted structure. Then, construct a new object with the updated layout:

let revisedValues = {
    'name': 'Brand New Name',
    'address.state': 'California',
    'address.timezone': 'America/Los_Angeles'
};

let formattedValues = {};
for(let entry in revisedValues){
    if(entry.includes('.')){
        let separated = entry.split('.');
        if(separated[0] in formattedValues)
            formattedValues[separated[0]][separated[1]] = revisedValues[entry];
        else{
            formattedValues[separated[0]] = {};
            formattedValues[separated[0]][separated[1]] = revisedValues[entry];
        }
    }else{
        formattedValues[entry] = revisedValues[entry];
    }
}
console.log(formattedValues);

Answer 7

Answer №4

Check out this optimized and streamlined approach to a function that involves assigning values by using the last value as reference:

let dataObj = {
  name: 'Old Name',
  address: {
    state: 'CA',
    timezone: 'America/California'
  }
}

let modifiedValues = {
  'name': 'New Name',
  'address.state': 'FL',
  'address.timezone': 'America/New_York'
}

function setAttributeFromPath(path, entity, value) {
  const final = (path = path.split('.')).pop();
  path.reduce((a, b) => a && a[b], entity)[final] = value;
}

for(const key in modifiedValues) setAttributeFromPath(key, dataObj, modifiedValues[key]);

console.log(dataObj);

The loop operation can be integrated into the function itself utilizing array destructuring in the following manner:

function setAttributesFromPath(pathMap, entity) {
  Object.entries(pathMap).forEach(([path,value]) => {
    const final = (path = path.split('.')).pop();
    path.reduce((a, b) => a && a[b], entity)[final] = value;
  });
}

Answer 8

Check out this optimized and streamlined approach to a function that involves assigning values by using the last value as reference:

let dataObj = {
  name: 'Old Name',
  address: {
    state: 'CA',
    timezone: 'America/California'
  }
}

let modifiedValues = {
  'name': 'New Name',
  'address.state': 'FL',
  'address.timezone': 'America/New_York'
}

function setAttributeFromPath(path, entity, value) {
  const final = (path = path.split('.')).pop();
  path.reduce((a, b) => a && a[b], entity)[final] = value;
}

for(const key in modifiedValues) setAttributeFromPath(key, dataObj, modifiedValues[key]);

console.log(dataObj);

The loop operation can be integrated into the function itself utilizing array destructuring in the following manner:

function setAttributesFromPath(pathMap, entity) {
  Object.entries(pathMap).forEach(([path,value]) => {
    const final = (path = path.split('.')).pop();
    path.reduce((a, b) => a && a[b], entity)[final] = value;
  });
}

Adjusting an item according to a specified pathway

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Express/NodeJS encountering a CORS problem, causing services to be inaccessible in Internet Explorer

Locate the index of each distinct element within the array

Is there a way to embed HTML code within a JavaScript variable?

Navigate to a local server running on localhost:3000 and access the external URL www.google.com

How come .trim() isn't cooperating with me?

Having trouble retrieving data from JSON using JavaScript

Every time I attempt to execute mupx deploy, an error message appears

Getting data from a PHP request using AngularJS can be achieved by creating an HTTP request in

A step-by-step guide on changing an image

ng-options do not refresh automatically when modifying elements in the array

Identifying the HTML elements beneath the mouse pointer

Access specific data from a jQuery event

What is the best way to generate a "JSON diff" that can be displayed in the JavaScript console?

Finding all parent IDs from a given child ID within a nested JSON structure that contains children can be achieved by recursively

In Angular, the process of duplicating an array by value within a foreach function is not

Issue: Trouble with ajax form functionality

Mastering the syntax of Babel in Node.js

Calculating every number within a range of dates and storing them in the format of [day, hour]

Having trouble with Angular routing when attempting to directly access a specific URL path?

Customizing Material UI: Grouping Tab components within a div container