w3resource

JavaScript: Flatten an object with the paths for keys

JavaScript fundamental (ES6 Syntax): Exercise-233 with Solution

Flatten Object Keys as Paths

Write a JavaScript program to flatten an object with the paths for keys.

  • Use recursion.
  • Use Object.keys(obj) combined with Array.prototype.reduce() to convert every leaf node to a flattened path node.
  • If the value of a key is an object, the function calls itself with the appropriate prefix to create the path using Object.assign().
  • Otherwise, it adds the appropriate prefixed key-value pair to the accumulator object.
  • You should always omit the second argument, prefix, unless you want every key to have a prefix.

Sample Solution:

JavaScript Code:

// Define a function 'flattenObject' that flattens nested objects into a single-level object with dot-separated keys
const flattenObject = (obj, prefix = '') =>
  Object.keys(obj).reduce((acc, k) => {
    const pre = prefix.length ? prefix + '.' : ''; // Construct the prefix for the current key
    if (typeof obj[k] === 'object') // If the current value is an object, recursively call 'flattenObject' and merge the result into the accumulator
      Object.assign(acc, flattenObject(obj[k], pre + k));
    else acc[pre + k] = obj[k]; // Otherwise, assign the current value to the accumulator with the constructed key
    return acc; // Return the accumulator
  }, {});

// Test the 'flattenObject' function with a sample object
console.log(flattenObject({ a: { b: { c: 1 } }, d: 1 }));

Output:

{"a.b.c":1,"d":1}

Flowchart:

flowchart: Flatten an object with the paths for keys.

Live Demo:

See the Pen javascript-basic-exercise-233-1 by w3resource (@w3resource) on CodePen.


Improve this sample solution and post your code through Disqus

Previous: Write a JavaScript program that takes a function as an argument, then makes the first argument the last.
Next: Write a JavaScript program to flatten a given array up to the specified depth.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/javascript-exercises/fundamental/javascript-fundamental-exercise-233.php