how to convert this nested object into a flat object?

You could loop through the entries of the object. If the value is an object, recursively call the function. Use flatMap to get a flattened array of entries.

Then use Object.fromEntries() to get an object from the flattened array of entries

const input = {
  a: 'jack',
  b: {
    c: 'sparrow',
    d: {
      e: 'hahaha'
    }
  }
}

const getEntries = (o, prefix = '') => 
  Object.entries(o).flatMap(([k, v]) => 
    Object(v) === v  ? getEntries(v, `${prefix}${k}.`) : [ [`${prefix}${k}`, v] ]
  )

console.log(
  Object.fromEntries(getEntries(input))
)

Note: Object(v) === v returns true only for objects. typeof v === 'object' is true for v = null too.


You could use a recursive function to crawl the object and flatten it for you.

var test = {
    a: 'jack',
    b: {
        c: 'sparrow',
        d: {
            e: 'hahaha'
        }
    }
};

function traverseAndFlatten(currentNode, target, flattenedKey) {
    for (var key in currentNode) {
        if (currentNode.hasOwnProperty(key)) {
            var newKey;
            if (flattenedKey === undefined) {
                newKey = key;
            } else {
                newKey = flattenedKey + '.' + key;
            }

            var value = currentNode[key];
            if (typeof value === "object") {
                traverseAndFlatten(value, target, newKey);
            } else {
                target[newKey] = value;
            }
        }
    }
}

function flatten(obj) {
    var flattenedObject = {};
    traverseAndFlatten(obj, flattenedObject);
    return flattenedObject;
}

var flattened = JSON.stringify(flatten(test));
console.log(flattened);

One way to reverse this, if needed, is a nested set of loops. There is probably a cleaner way to accomplish this though:

var test = {'a':'jack','b.c':'sparrow','b.d.e':'hahaha'};

function expand(target, keySeparator) {
    var result = {};
    for (var key in target) {
        if (target.hasOwnProperty(key)) {
          var nestedKeys = key.split(keySeparator);
          // Get the last subKey
          var leaf = nestedKeys[nestedKeys.length - 1];
          // Get all subKeys except for the last
          var branch = nestedKeys.slice(0, nestedKeys.length - 1);
          
          var currentTarget = result;
          for (var i = 0; i < branch.length; i += 1) {
            var subKey = nestedKeys[i];
            // If this is the first time visiting this branch, we need to instantiate it
            if (currentTarget[subKey] === undefined) {
              currentTarget[subKey] = {};
            }
            // Visit the branch
            currentTarget = currentTarget[subKey];
          }
          currentTarget[leaf] = target[key];
        }
    }
    return result;
}

var expanded = JSON.stringify(expand(test, "."));
console.log(expanded);

An alternative recursive implementation. I just felt like writing one implementation myself, even though the current ones are already really good.

The recursive function checks whether the key is of type 'object'.

  • If it's an object, we iterate by each object's key.
  • Else, we add it into our result object.
function flat(res, key, val, pre = '') {
  const prefix = [pre, key].filter(v => v).join('.');
  return typeof val === 'object'
    ? Object.keys(val).reduce((prev, curr) => flat(prev, curr, val[curr], prefix), res)
    : Object.assign(res, { [prefix]: val});
}
return Object.keys(input).reduce((prev, curr) => flat(prev, curr, input[curr]), {});

Flat NPM package

Or you can simply use flat npm package, which is a well known tested library.

var flatten = require('flat')
flatten(obj);

⬑ I would use this in serious code.

[Extra] Neater call to the function above

function flatObject(input) {
  function flat(res, key, val, pre = '') {
    const prefix = [pre, key].filter(v => v).join('.');
    return typeof val === 'object'
      ? Object.keys(val).reduce((prev, curr) => flat(prev, curr, val[curr], prefix), res)
      : Object.assign(res, { [prefix]: val});
  }

  return Object.keys(input).reduce((prev, curr) => flat(prev, curr, input[curr]), {});
}

const result = flatObject(input);

[Extra] Demo

http://codepen.io/zurfyx/pen/VpErja?editors=1010

function flatObject(input) {
  function flat(res, key, val, pre = '') {
    const prefix = [pre, key].filter(v => v).join('.');
    return typeof val === 'object'
      ? Object.keys(val).reduce((prev, curr) => flat(prev, curr, val[curr], prefix), res)
      : Object.assign(res, { [prefix]: val});
  }

  return Object.keys(input).reduce((prev, curr) => flat(prev, curr, input[curr]), {});
}

const result = flatObject({
    a: 'jack',
    b: {
        c: 'sparrow',
        d: {
           e: 'hahaha'
        }
    }
});

document.getElementById('code').innerHTML = JSON.stringify(result, null, 2);
<pre><code id="code"></code></pre>

Tags:

Javascript

Jquery

Recent Posts