Manipulate JSON data using a string path in JavaScript

Question

Manipulate JSON data using a string path in JavaScript

Suppose I have the following JSON data, which can easily be converted into a JavaScript object:

{
    "foo": {
        "bar": "Common substitute word",
        "baz": "Another common substitute word",
        "questionWords": {
            "wat": "Inadequate question word",
            "wut": "Even more inadequate question word"
        }
    }
}

Now, I receive modifications for this JSON in another JSON file, like so:

{
    "foo.questionWords.wut": "A question word to avoid"
}

The path to modify is provided as a string, and I need to update the original JSON with this new information.

However, there are cases where the new data path may not exist:

{
    "foo.callingWords.dude": "Commonly used synonym for pal"
}

Additionally, the new data path could have an unknown depth:

{
    "who.knows.how.deep.we.will.go": "Look, a penny!"
}

What would be the most effective way to handle these scenarios using plain Vanilla JavaScript without the use of any libraries?

(Feel free to utilize the latest JavaScript features.)

Thank you for your assistance!

javascript json

Answer 1

Answer №1

Avoid using the `eval` function in situations like this one. Break down your "path" and proceed slowly:

let information = {
    "foo": {
        "bar": "Common alternative word",
        "baz": "Another widely-used substitute word",
        "questionWords": {
            "wat": "Insufficient interrogative term",
            "wut": "Even more inadequate question marker"
        }
    }
},

alterations = {
  "foo.questionWords.wut": "An undesirable question term",
  "foo.callingWords.dude": "Popular synonym for friend",
  "who.knows.how.deep.we.will.go": "Hey, look, a quarter!"
};

function implementChanges(information, alterations) {
  for (let path in alterations) {
    let key = information;
    let steps = path.split('.');
    let lastStep = steps.pop();
    steps.forEach(element => (key[element] = key[element] || {}) && (key = key[element]));
    key[lastStep] = alterations[path];
  }
  return information
}

console.log(implementChanges(information, alterations))

Answer 2

Avoid using the `eval` function in situations like this one. Break down your "path" and proceed slowly:

let information = {
    "foo": {
        "bar": "Common alternative word",
        "baz": "Another widely-used substitute word",
        "questionWords": {
            "wat": "Insufficient interrogative term",
            "wut": "Even more inadequate question marker"
        }
    }
},

alterations = {
  "foo.questionWords.wut": "An undesirable question term",
  "foo.callingWords.dude": "Popular synonym for friend",
  "who.knows.how.deep.we.will.go": "Hey, look, a quarter!"
};

function implementChanges(information, alterations) {
  for (let path in alterations) {
    let key = information;
    let steps = path.split('.');
    let lastStep = steps.pop();
    steps.forEach(element => (key[element] = key[element] || {}) && (key = key[element]));
    key[lastStep] = alterations[path];
  }
  return information
}

console.log(implementChanges(information, alterations))

Answer 3

Answer №2

When working with vanillaJS, there is a risky option available using the eval function (but beware, proceed with caution!) as shown below:

var g = {
    "lorem": {
        "ipsum": "Random placeholder text",
        "dolor": "Another random placeholder text",
        "questionPhrases": {
            "why": "Not so great question phrase",
            "how": "Could be better question phrase"
        }
    }
};

eval("g.lorem.ipsum = 42;")

https://i.sstatic.net/hefdT.png

Answer 4

When working with vanillaJS, there is a risky option available using the eval function (but beware, proceed with caution!) as shown below:

var g = {
    "lorem": {
        "ipsum": "Random placeholder text",
        "dolor": "Another random placeholder text",
        "questionPhrases": {
            "why": "Not so great question phrase",
            "how": "Could be better question phrase"
        }
    }
};

eval("g.lorem.ipsum = 42;")

https://i.sstatic.net/hefdT.png

Answer 5

Answer №3

Similar to the general consensus, just steering clear of using eval(), in case it causes any issues.

let data={
    "foo": {
        "bar": "Substitute for a commonly used word",
        "baz": "Another alternative for a popular word",
        "questionWords": {
            "wat": "Not a great choice for a question word",
            "wut": "An even worse option as a question word"
        }
    }
}

let newData={
    "foo.questionWords.wut": "A question term that should be avoided"
}

for(let key in newData){
  let parts = key.split(".");
    let lastKey = parts.splice(parts.length-1,1);
    let nestedObj = parts.reduce((result, prop) => result && result[prop] ? result[prop] : '' , data);
    nestedObj[lastKey]=newData[key];
}
console.log(data);

Answer 6

Similar to the general consensus, just steering clear of using eval(), in case it causes any issues.

let data={
    "foo": {
        "bar": "Substitute for a commonly used word",
        "baz": "Another alternative for a popular word",
        "questionWords": {
            "wat": "Not a great choice for a question word",
            "wut": "An even worse option as a question word"
        }
    }
}

let newData={
    "foo.questionWords.wut": "A question term that should be avoided"
}

for(let key in newData){
  let parts = key.split(".");
    let lastKey = parts.splice(parts.length-1,1);
    let nestedObj = parts.reduce((result, prop) => result && result[prop] ? result[prop] : '' , data);
    nestedObj[lastKey]=newData[key];
}
console.log(data);

Answer 7

Answer №4

Here is my recursive approach to solving the problem.

const updateNestedObject = (object, path, value) => {
  const keys = path.split(".");
  const key = keys.splice(0, 1);
  if (keys.length > 0) {
    updateNestedObject(object[key], keys.join('.'), value)
  } else {
    object[key] = value;
  }
}

const data = {
  foo: {
    bar: 11,
    baz: 12,
    bac: {
      leng: 1,
      str: 'hello world'
    }
  }
};

updateNestedObject(data, 'foo.bac.leng', 'modified');

console.log(JSON.stringify(data));

Answer 8

Here is my recursive approach to solving the problem.

const updateNestedObject = (object, path, value) => {
  const keys = path.split(".");
  const key = keys.splice(0, 1);
  if (keys.length > 0) {
    updateNestedObject(object[key], keys.join('.'), value)
  } else {
    object[key] = value;
  }
}

const data = {
  foo: {
    bar: 11,
    baz: 12,
    bac: {
      leng: 1,
      str: 'hello world'
    }
  }
};

updateNestedObject(data, 'foo.bac.leng', 'modified');

console.log(JSON.stringify(data));

Answer 9

Answer №5

When utilizing an imperative approach by directly updating the source:

modifyAll = function(source, target) {
    Object.keys(target)
        .forEach((k) => modify(source, k, target[k]));
}

modify = function(source, targetKey, targetValue) {
var keys = targetKey.split('.');

    // Continue looping until there are keys to extract and as long as source exists for that key.
     while((key = keys.shift()) && source[key]) {

        // If we reach a leaf node, update it with the new value. Otherwise, keep traversing deeper into
        // the object.
        if (keys.length === 0 && typeof source[key] !== 'object') {
            source[key] = targetValue;
        } else {
            source = source[key];
        }
    }
}

Answer 10

When utilizing an imperative approach by directly updating the source:

modifyAll = function(source, target) {
    Object.keys(target)
        .forEach((k) => modify(source, k, target[k]));
}

modify = function(source, targetKey, targetValue) {
var keys = targetKey.split('.');

    // Continue looping until there are keys to extract and as long as source exists for that key.
     while((key = keys.shift()) && source[key]) {

        // If we reach a leaf node, update it with the new value. Otherwise, keep traversing deeper into
        // the object.
        if (keys.length === 0 && typeof source[key] !== 'object') {
            source[key] = targetValue;
        } else {
            source = source[key];
        }
    }
}

Manipulate JSON data using a string path in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

ajax with names that are alike

Order of callback execution in jQuery's ready function

Executing JavaScript - Triggering an 'onClick' event within a For loop to dynamically load multiple hyperlinks

Exploring the depths of deep populating in Mongo and Node.js

What was the reason for the removal of the `encoding` keyword argument from json.loads() function in Python 3.9?

I'm looking to filter this array based on the value of a subarray that the user will specify the key and value for. How can I accomplish

Avoiding the unnecessary re-rendering of input fields in React when their values change

Is there a way to automatically navigate to the accounting dashboard once the extract import is complete?

Differences between Cypress and JQuery objects, and the significance of the cy.wrap function

Conceal dynamically generated div elements created with ngIf

The footer is now accompanied by the <v-navigation-drawer> on the side

Experience Markdown's Single Input Update Feature

Tips for executing a function whenever unfamiliar anchor elements are selected in Vue.js 3

Begin the process by hitting the enter key

Incorporating '@vite-pwa/nuxt' into a nuxt 3 project leads to hydration issues

Rotate Text in HTML <thead> Tag

What is the best way to show a second button once the first button has been clicked?

Angulating Service Testing

Creating a basic jQuery button to switch an element's background color is a breeze

Changing the content of the initial post in a loop on WordPress