Updating multiple values within a JSON object, jsObject, or string

Question

Updating multiple values within a JSON object, jsObject, or string

After receiving a response from a web service, I need to replace certain values in the response with custom values that I have defined.

One possible approach is to create a tree traverser to identify the specific values and replace them with the custom values.

The original response looks like this:

[
  {
    "name": "n1",
    "value": "v1",
    "children": [
      {
        "name": "n2",
        "value": "v2"
      }
    ]
  },
  {
    "name": "n3",
    "value": "v3"
  }
]

Here is my custom mapping:

const map = {
  "v1": "v11",
  "v2": "v22",
  "v3": "v33"
};

What I wish to achieve is:

[
  {
    "name": "n1",
    "value": "v11",
    "children": [
      {
        "name": "n2",
        "value": "v22"
      }
    ]
  },
  {
    "name": "n3",
    "value": "v33"
  }
]

I am considering the idea of converting the response to a string and then using a custom regular expression to replace the values based on my map.

Would this method be more efficient than using a tree traverser?
If so, what would be the best way to implement it?

It would look something like this:

originalString.replace(regexp, function (replacement))

javascript json regex string replace

Answer 1

Answer №1

The efficiency of tree traversal over regex

It's worth noting that while some aspects could be optimized in the regex implementation, there are clear bottlenecks that need to be addressed.

Reasons behind the slowness of regex:

There might be multiple factors contributing to the slow performance of regex, but one major issue stands out:

When you utilize regex for finding and replacing, it involves generating new strings each time and executing matches repeatedly. This can make regex expressions quite costly, and despite my implementation not being overly expensive, performance is still impacted.

Advantages of tree traversal in terms of speed:

With tree traversal, direct object modification takes place without the need for creating new string objects or any additional objects. Additionally, there is no need for a full string search every time, leading to improved efficiency.

RESULTS

Run the performance test provided below. The test employs console.time to measure the duration. It becomes evident that tree traversal significantly outperforms regex.

function usingRegex(obj, map) {
  return JSON.parse(Object.keys(map).map(oldValue => ({
    oldValue,
    newValue: map[oldValue]
  })).reduce((json, {
    oldValue,
    newValue
  }) => {
    return json.replace(
      new RegExp(\`"value":"(${oldValue})"\`),
      () => \`"value":"\${newValue}"\`
    );
  }, JSON.stringify(obj)));
}

function usingTree(obj, map) {
  function traverse(children) {
    for (let item of children) {
      if (item && item.value) {
        item.value = map[item.value];
      }
      if (item && item.children) {
        traverse(item.children)
      }
    }
  }
  
  traverse(obj);
  return obj; // mutates
}

const obj = JSON.parse(\`[
  {
    "name": "n1",
    "value": "v1",
    "children": [
      {
        "name": "n2",
        "value": "v2"
      }
    ]
  },
  {
    "name": "n3",
    "value": "v3"
  }
]\`);

const map = {
  "v1": "v11",
  "v2": "v22",
  "v3": "v33"
};

// Verify the functionality of each function
console.log('== TEST THE FUNCTIONS ==');
console.log('usingRegex', usingRegex(obj, map));
console.log('usingTree', usingTree(obj, map));

const iterations = 10000; // ten thousand
console.log('== DO 10000 ITERATIONS ==');
console.time('regex implementation');
for (let i = 0; i < iterations; i += 1) {
  usingRegex(obj, map);
}
console.timeEnd('regex implementation');

console.time('tree implementation');
for (let i = 0; i < iterations; i += 1) {
  usingTree(obj, map);
}
console.timeEnd('tree implementation');

Answer 2

The efficiency of tree traversal over regex

It's worth noting that while some aspects could be optimized in the regex implementation, there are clear bottlenecks that need to be addressed.

Reasons behind the slowness of regex:

There might be multiple factors contributing to the slow performance of regex, but one major issue stands out:

When you utilize regex for finding and replacing, it involves generating new strings each time and executing matches repeatedly. This can make regex expressions quite costly, and despite my implementation not being overly expensive, performance is still impacted.

Advantages of tree traversal in terms of speed:

With tree traversal, direct object modification takes place without the need for creating new string objects or any additional objects. Additionally, there is no need for a full string search every time, leading to improved efficiency.

RESULTS

Run the performance test provided below. The test employs console.time to measure the duration. It becomes evident that tree traversal significantly outperforms regex.

function usingRegex(obj, map) {
  return JSON.parse(Object.keys(map).map(oldValue => ({
    oldValue,
    newValue: map[oldValue]
  })).reduce((json, {
    oldValue,
    newValue
  }) => {
    return json.replace(
      new RegExp(\`"value":"(${oldValue})"\`),
      () => \`"value":"\${newValue}"\`
    );
  }, JSON.stringify(obj)));
}

function usingTree(obj, map) {
  function traverse(children) {
    for (let item of children) {
      if (item && item.value) {
        item.value = map[item.value];
      }
      if (item && item.children) {
        traverse(item.children)
      }
    }
  }
  
  traverse(obj);
  return obj; // mutates
}

const obj = JSON.parse(\`[
  {
    "name": "n1",
    "value": "v1",
    "children": [
      {
        "name": "n2",
        "value": "v2"
      }
    ]
  },
  {
    "name": "n3",
    "value": "v3"
  }
]\`);

const map = {
  "v1": "v11",
  "v2": "v22",
  "v3": "v33"
};

// Verify the functionality of each function
console.log('== TEST THE FUNCTIONS ==');
console.log('usingRegex', usingRegex(obj, map));
console.log('usingTree', usingTree(obj, map));

const iterations = 10000; // ten thousand
console.log('== DO 10000 ITERATIONS ==');
console.time('regex implementation');
for (let i = 0; i < iterations; i += 1) {
  usingRegex(obj, map);
}
console.timeEnd('regex implementation');

console.time('tree implementation');
for (let i = 0; i < iterations; i += 1) {
  usingTree(obj, map);
}
console.timeEnd('tree implementation');

Answer 3

Answer №2

Is there a faster solution than tree traversal?

It's hard to say for sure. The speed of the solution may vary depending on factors such as input size and the complexity of the replacement map. One way to find out is to conduct performance tests on platforms like JSPerf.com.

If so, what is the best approach?

For a quick and efficient string replacement process without the need for special escaping, a regex-based solution can be used. Here is an example code snippet:

const input = [
  {
    "name": "n1",
    "value": "v1",
    "children": [
      {
        "name": "n2",
        "value": "v2"
      }
    ]
  },
  {
    "name": "n3",
    "value": "v3"
  }
];

const map = {
  "v1": "v11",
  "v2": "v22",
  "v3": "v33"
};

const regex = new RegExp(':\\s*"(' + Object.keys(map).join('|') + ')"', 'g');

const json = JSON.stringify(input);
const result = JSON.parse(
  json.replace(regex, function(m, key) { return ': "' + map[key] + '"'; })
);

console.log(result);

Answer 4

Is there a faster solution than tree traversal?

It's hard to say for sure. The speed of the solution may vary depending on factors such as input size and the complexity of the replacement map. One way to find out is to conduct performance tests on platforms like JSPerf.com.

If so, what is the best approach?

For a quick and efficient string replacement process without the need for special escaping, a regex-based solution can be used. Here is an example code snippet:

const input = [
  {
    "name": "n1",
    "value": "v1",
    "children": [
      {
        "name": "n2",
        "value": "v2"
      }
    ]
  },
  {
    "name": "n3",
    "value": "v3"
  }
];

const map = {
  "v1": "v11",
  "v2": "v22",
  "v3": "v33"
};

const regex = new RegExp(':\\s*"(' + Object.keys(map).join('|') + ')"', 'g');

const json = JSON.stringify(input);
const result = JSON.parse(
  json.replace(regex, function(m, key) { return ': "' + map[key] + '"'; })
);

console.log(result);

Answer 5

Answer №3

The speed of a traverser can greatly surpass that of an iterator when performing string replacements, as the traverser interacts with each individual character in the final string, whereas the iterator may skip over certain items in the process.

Answer 6

The speed of a traverser can greatly surpass that of an iterator when performing string replacements, as the traverser interacts with each individual character in the final string, whereas the iterator may skip over certain items in the process.

Updating multiple values within a JSON object, jsObject, or string

Answer №1

Answer №2

Answer №3

Similar questions

Formatting Strings in JavaScript when saving as a .txt file with proper indentation

In JavaScript, alert a message once all images have been clicked

Can we use an open-ended peer version dependency in package.json?

What do you prefer: defining properties with the JSON object or with objectName.property in JavaScript

Experiencing a blank array when using filtering/search text in a Nodejs application with MongoDB

Jquery countdown that persists even after refreshing the page with F5

Messages traced by log4javascript are not being displayed

Is it necessary to have NodeJs in order to host a React app on a server?

Getting map data from Mapbox and displaying it on an HTML page

Contrasting onevent with addEventListener

What is the best method for transferring images to a node.js server using Axios?

I am looking to host several iterations of jQuery on a content delivery network within my Nuxt application

Finding your way to a particular section within a webpage through an external source

Failure of regex expression when applied to a string

How can I implement a redirect back to the previous query page post-authentication in Next.js 13?

Is there a way to incorporate HTML code into a fullCalendar 4 event title?

Unlocking the potential: Clicking on all ng-if elements with matching text using Chrome console

Scrapy generates faulty JSON output

Consistently Incorrect Date Formatting in Bootstrap Display

Using Node.js to download and install npm packages from the local hard drive