Flatten javascript objects into a single-depth object

Object Flatten

var flattenObject = function(ob) {
	var toReturn = {};
	
	for (var i in ob) {
		if (!ob.hasOwnProperty(i)) continue;
		
		if ((typeof ob[i]) == 'object') {
			var flatObject = flattenObject(ob[i]);
			for (var x in flatObject) {
				if (!flatObject.hasOwnProperty(x)) continue;
				
				toReturn[i + '.' + x] = flatObject[x];
			}
		} else {
			toReturn[i] = ob[i];
		}
	}
	return toReturn;
};

Useful, thanks!

Many thanks for this snippet!

line 7 will flatten an Array (typeof [] => "object"), you may want to use toString.call(ob[i]) instead if you want the actual array, instead of it being flattened too.

Thanks! Just what I was looking for!

👍

This is awesome, nice work!

I ended up making one small mod on line 7 to flatten keys carrying null values:

  if ((typeof ob[i]) == 'object' && ob[i] !== null) {

(since typeof null == "object")

Nice! Just what I was looking for.

Super helpful. Thank you!

many thanks sir

thank you sir. 👍

Definitely agree with @dustinlarimer. It's also generally good practice to use === rather than ==. That being said, awesome 😊

pure awesomesauce :: ty

---

i forked @ https://gist.github.com/gdibble/9e0f34f0bb8a9cf2be43 w/ this behavior:

• input: { 'a':{ 'b':{ 'b2':2 }, 'c':{ 'c2':2, 'c3':3 } } }
• output: { 'a.b.b2':2, 'a.c.c2':2, 'a.c.c3':3 }

This only goes one level deep. This doesn't flatten as expected

This silently fails for Date properties, because they pass the typeof i === 'object' test, but can't actually be recursively traversed.

If you want arrays and date objects to be ignored you should use:

OK way to do it (if you know you will only go across arrays, objects and Date objects):

    Object.prototype.toString.call( obj[i] ) === '[object Object]'

    // Because
    Object.prototype.toString.call( [] ) // returns "[object Array]"
    Object.prototype.toString.call( new Date() ) // returns "[object Date]"    
    Object.prototype.toString.call( {} ) // returns "[object Object]"

Better way (if you need to differentiate by type more than just arrays, objects and Date object):

    var obj = {};
    obj.constructor === Object; // will return true

    // So if we have something like
    function Test() {}
    var obj = new Test();
    obj.constructor === Test // will return true
    // Sweet! We can detect if it is an object with custom constructor

    // Whereas
    Object.prototype.toString.call( obj ) === "[object Object]" // will return true
   // which is just not OK if there are object with custom constructor functions

Many thanks for this cool snippet.

Beautiful!!!

Modified version in coffee:

flattenObject = (ob) ->
  what = Object.prototype.toString
  toReturn = {}
  for i of ob
    if !ob.hasOwnProperty(i)
      continue
    result = what.call(ob[i])
    if result == '[object Object]' or result == '[object Array]'
      flatObject = flattenObject(ob[i])
      for x of flatObject
        if !flatObject.hasOwnProperty(x)
          continue
        toReturn[i + '.' + x] = flatObject[x]
    else
      toReturn[i] = ob[i]
  toReturn

as the documentation says :

The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

Then I use it to write another version of the method without unnecessary hasOwnProperty checks, it works with String, int, object, array, array of object, null, undefined, you can check this jsbin :

var flattenObject = function(ob) {
  
  return Object.keys(ob).reduce(function(toReturn, k) {

    if (Object.prototype.toString.call(ob[k]) === '[object Date]') {
      toReturn[k] = ob[k].toString();
    }
    else if ((typeof ob[k]) === 'object' && ob[k]) {
      var flatObject = flattenObject(ob[k]);
      Object.keys(flatObject).forEach(function(k2) {
        toReturn[k + '.' + k2] = flatObject[k2];
      });
    }
    else {
      toReturn[k] = ob[k];
    }

    return toReturn;
  }, {});
};

Might I recommend updating this to ES6?

I created this as an ES6 closure:

/**
 * PRIVATE
 * Flatten a deep object into a one level object with it’s path as key
 *
 * @param  {object} object - The object to be flattened
 *
 * @return {object}        - The resulting flat object
 */
const flatten = object => {
  return Object.assign( {}, ...function _flatten( objectBit, path = '' ) {  //spread the result into our return object
    return [].concat(                                                       //concat everything into one level
      ...Object.keys( objectBit ).map(                                      //iterate over object
        key => typeof objectBit[ key ] === 'object' ?                       //check if there is a nested object
          _flatten( objectBit[ key ], `${ path }/${ key }` ) :              //call itself if there is
          ( { [ `${ path }/${ key }` ]: objectBit[ key ] } )                //append object with it’s path as key
      )
    )
  }( object ) );
};

Call it via:

const flat = flatten( realDeepObject );

Test case:

const realDeepObject = {
  level1: {
    level2: {
      level3: {
        more: 'stuff', //duplicate key
        other: 'stuff',
        level4: {
          the: 'end',
        },
      },
    },
    level2still: {
      last: 'one',
    },
    am: 'bored',
  },
  more: 'stuff', //duplicate key
  ipsum: {
    lorem: 'latin',
  },
};

const flat = flatten( realDeepObject );

console.log( flat );

Output:

{ '/level1/level2/level3/more': 'stuff',
  '/level1/level2/level3/other': 'stuff',
  '/level1/level2/level3/level4/the': 'end',
  '/level1/level2still/last': 'one',
  '/level1/am': 'bored',
  '/more': 'stuff',
  '/ipsum/lorem': 'latin' }

(You can replace the separators / with a dot . to make it fit your job)

what would I have to change so that the first separator is removed?
output should be:

{ 'level1/level2/level3/more': 'stuff',
'level1/level2/level3/other': 'stuff',
'level1/level2/level3/level4/the': 'end',
'level1/level2still/last': 'one',
'level1/am': 'bored',
'more': 'stuff',
'ipsum/lorem': 'latin' }

@afrozl you can modify it like this _flatten( objectBit, path = 'deepObject' )

Tyepscript version

private flattenObject(ob:any): any {
        const toReturn = {};

        for (const key in ob) {
            if (!ob.hasOwnProperty(key)) {
                continue;
            }
            if ((typeof ob[key]) === 'object') {
                const flatObject = this.flattenObject(ob[key]);
                for (const key2 in flatObject) {
                    if (!flatObject.hasOwnProperty(key2)) {
                        continue;
                    }
                    // this.logger.debug(`adding ${key + '.' + key2}:${flatObject[key2]}`);
                    toReturn[key + '.' + key2] = flatObject[key2];
                }
            } else {
                // this.logger.debug(`adding ${key}:${ob[key]}`);
                toReturn[key] = ob[key];
            }
        }
        return toReturn;
    };

Hi, I've changed the version of @dominikwilkowski slightly:

function flatten(object, separator = '.') {
    return Object.assign({}, ...function _flatten(child, path = []) {
        return [].concat(...Object.keys(child).map(key => typeof child[key] === 'object'
            ? _flatten(child[key], path.concat([key]))
            : ({ [path.concat([key]).join(separator)] : child[key] })
        ));
    }(object));
}

👍 Thanks, @danieldietrich

Here is an improved version of @danieldietrich in typescript but can easily be transformed to ES6

function flatten(object: object, separator = '.'): object {
  const isValidObject = (value): boolean => {
    if (!value) { return false; }
    const isArray = Array.isArray(value);
    const isBuffer = Buffer.isBuffer(value);
    const isΟbject = Object.prototype.toString.call(value) === "[object Object]";
    const hasKeys = !!Object.keys(value).length;
    return !isArray && !isBuffer && isΟbject && hasKeys;
  };
  return Object.assign({}, ...function _flatten(child, path = []) {
    return [].concat(...Object.keys(child)
      .map(key => isValidObject(child[key])
        ? _flatten(child[key], path.concat([key]))
        : { [path.concat([key]).join(separator)]: child[key] }));
  }(object));
}

@JimiC I had some errors and when using your version, regarding implicit any returns and the string[] to never[] thing. I have tweaked it but as I'm still getting familiar with TypeScript I am unsure if I have actually improved it or merely found a way for the compiler to give up complaining. Sharing it here just in case it's helpful:

export function flatten(object: Object, separator: string = '.'): Object {
    const isValidObject = (value: {}): boolean => {
        if (!value) { 
            return false;
        }

        const isArray = Array.isArray(value);
        const isBuffer = Buffer.isBuffer(value);
        const isΟbject = Object.prototype.toString.call(value) === '[object Object]';
        const hasKeys = !!Object.keys(value).length;

        return !isArray && !isBuffer && isΟbject && hasKeys;
    };

    const walker = (child: {}, path: Array<string> = []): Object => {
        return Object.assign({}, ...Object.keys(child).map(key => isValidObject(child[key])
            ? walker(child[key], path.concat([key]))
            : { [path.concat([key]).join(separator)]: child[key] })
        );
    };

    return Object.assign({}, walker(object));
}

ES6 version of @hellodeibu, had to remove the isBuffer check, since there's no Buffer class in ES6.

function flatten(object, separator = '.') {

	const isValidObject = value => {
		if (!value) {
			return false
		}

		const isArray  = Array.isArray(value)
		const isObject = Object.prototype.toString.call(value) === '[object Object]'
		const hasKeys  = !!Object.keys(value).length

		return !isArray && isObject && hasKeys
	}

	const walker = (child, path = []) => {

		return Object.assign({}, ...Object.keys(child).map(key => isValidObject(child[key])
			? walker(child[key], path.concat([key]))
			: { [path.concat([key]).join(separator)] : child[key] })
		)
	}

	return Object.assign({}, walker(object))
}

thanks @tonioriol it works great.

@danieldietrich I like your version the most, but typeof child[key] === 'object' && child[key] !== null would be better as for me, because for now function works only if there are no null values in object

From this post I'm creates little utils Flatt
https://github.com/xv1t/flatt
Thanx

const flattenObj = (o, pk='') => {
  const ret = Object.keys(o).reduce((a, key) => {
    const kk = ''+(pk?pk+':'+key:key);
    if (typeof o[key] !== 'object') {
      a[kk] = o[key];
    } else {
      a = Object.assign(a, flattenObj(o[key], kk));
    }
    return a;
  }, {})
  return ret;
}

const flattenObj = (obj) => {
  if (!obj) {
    throw Error(`flattenObj function expects an Object, received ${typeof obj}`)
  }
  return Object.keys(obj).reduce((acc, curr) => {
    const objValue = obj[curr]
    const ret = (objValue && objValue instanceof Object)
      ? flattenObj(objValue)
      : { [curr]: objValue }
    return Object.assign(acc, ret)
  }, {})
}

@pablohpsilva – your code is fundamentally wrong. Object flattening should accumulate keys:

console.log(flattenObj({
  users: {
    set: "whatnot",
  },
  projects: {
    set: "whatnot",
  }
}))

has to produce:

{
 "users.set": "whatnot",
 "projects.set": "whatnot",
}

Otherwise it's pretty worthless (not to mention name clashes...). Also flattening must not flatten dates, regexps, arrays, etc.

Enjoy:

let isPlainObj = (o) => Boolean(
  o && o.constructor && o.constructor.prototype && o.constructor.prototype.hasOwnProperty("isPrototypeOf")
)

let flattenObj = (obj, keys=[]) => {
  return Object.keys(obj).reduce((acc, key) => {
    return Object.assign(acc, isPlainObj(obj[key])
      ? flattenObj(obj[key], keys.concat(key))
      : {[keys.concat(key).join(".")]: obj[key]}
    )
  }, {})
}

console.log(flattenObj({}) // {}

console.log(flattenObj({foo: "foo"}) // {foo: "foo"}

console.log(flattenObj({
  users: {
    set: "whatnot",
  },
  projects: {
    set: "whatnot",
  },
  dates: {
    d1: new Date(),
    d2: new Date(),
  },
  array: [{foo: "foo"}, {bar: "bar"}]
}))

{ 'users.set': 'whatnot',
  'projects.set': 'whatnot',
  'dates.d1': <dateobj1>,
  'dates.d2': <dateobj2>,
  array: [ { foo: 'foo' }, { bar: 'bar' } ] }

this version will return a flattened object which can be used to generate rails style params which will be interpreted to a ruby object. example output goes {a: {b: 'b', x: { y: 'y'}}, c: 'c', d: { e: 'e'}} => { 'a[b]': 'b', 'a[x][y]': 'y', 'c': 'c', 'd[e]': 'e' }. this can be useful if you would like to use rails as an api server from javascript / ajax.

  // ussage : 
  // flattenobj( object );   // 'key' and 'q' below are internal parameters only. do not use.
 function flattenobj(obj, key = '', q = {}) {

   for (k in obj) {

     if (typeof (obj) === "object") {

       let kb;

        key === '' ? kb = k : kb = '[' + k + ']';

        flattenobj(obj[k], key + kb, q);

      } else {

         q[key] = obj;

     }
   }
 return q;
 }

TypeScript version with custom keys:

type KeyFactory = (previousKey: string, currentKey: string) => string;

function flattenObject(ob: { [key: string]: any }, keyFactory: KeyFactory | null = null): { [key: string]: any } {
    if (keyFactory === null) {
        keyFactory = (previousKey, currentKey) => previousKey + '.' + currentKey;
    }
    const toReturn: { [key: string]: string } = {};
    for (const i in ob) {
        if (!ob.hasOwnProperty(i)) {
            continue;
        }
        if ((typeof ob[i]) === 'object') {
            const flatObject = flattenObject(ob[i]);
            for (const x in flatObject) {
                if (!flatObject.hasOwnProperty(x)) {
                    continue;
                }
                toReturn[keyFactory(i, x)] = flatObject[x];
            }
        } else {
            toReturn[i] = ob[i];
        }
    }
    return toReturn;
}

Usage:

const obj = { foo: { bar: 'baz' } };
flattenObject(obj, (previous, current) => `${previous}[${current}]`)
// Returns { 'foo[bar]': 'baz' }

What is the lasted version? 🤔

last version

const flatten = (object, prefix = '') => {
  return Object.keys(object).reduce((prev, element) => {
    return object[element]  && typeof object[element] == 'object' &&  !Array.isArray(element)
      ? { ...prev, ...flatten(object[element], `${prefix}${element}.`) }
      : { ...prev, ...{ [`${prefix}${element}`]: object[element] } }
  }, {})
}

Usage

const obj = { foo: { bar: 'baz' } };
flatten(obj)
// Return {foo.bar: "baz"}

in node version 9.x i got the error:

? { ...prev, ...flatten(object[element], `${prefix}${element}.`) }
          ^^^

SyntaxError: Unexpected token ...

@tonioriol and others any body knows how to transform back the flattened object to the original object. Lets say i change the values of the 'x.y.z' keys in the flattened object, now i want to get the original object structure with the new values in them.

I used @ruisebastiao and fixed few minor things

const flatten = (object, prefix = '') =>
  Object.keys(object).reduce(
    (prev, element) =>
      object[element] &&
      typeof object[element] === 'object' &&
      !Array.isArray(object[element])
        ? { ...prev, ...flatten(object[element], `${prefix}${element}.`) }
        : { ...prev, ...{ [`${prefix}${element}`]: object[element] } },
    {},
  );

I used @arnigudj and added nested array flattening:

const flatten = (objectOrArray, prefix = '') => {
  const nestElement = (prev, value, key) => (value
          && typeof value === 'object'
    ? { ...prev, ...flatten(value, `${prefix}${key}.`) }
    : { ...prev, ...{ [`${prefix}${key}`]: value } });

  return Array.isArray(objectOrArray)
    ? objectOrArray.reduce(nestElement, {})
    : Object.keys(objectOrArray).reduce(
      (prev, element) => nestElement(prev, objectOrArray[element], element),
      {},
    );
};

Thank you!

anyone can revert this, i want to create object from single-depth object

I used @pozylon and added a formatter function, which will be applied on each key.

const flatten = (objectOrArray, prefix = '', formatter = (k) => ('.' + k)) => {
  const nestElement = (prev, value, key) => (
    (value && typeof value === 'object')
      ? { ...prev, ...flatten(value, `${prefix}${formatter(key)}`, formatter) }
      : { ...prev, ...{ [`${prefix}${formatter(key)}`]: value } });

  return Array.isArray(objectOrArray)
    ? objectOrArray.reduce(nestElement, {})
    : Object.keys(objectOrArray).reduce(
      (prev, element) => nestElement(prev, objectOrArray[element], element),
      {},
    );
};

Same thing as @mehrjoo, simply allows the possibility to have different formatter for the level 0 keys of your object

const flatten = (objectOrArray, prefix = '', formatter = (k) => (k)) => {
  const nestedFormatter = (k) => ('.' + k)
  const nestElement = (prev, value, key) => (
    (value && typeof value === 'object')
      ? { ...prev, ...flatten(value, `${prefix}${formatter(key)}`, nestedFormatter) }
      : { ...prev, ...{ [`${prefix}${formatter(key)}`]: value } });

  return Array.isArray(objectOrArray)
    ? objectOrArray.reduce(nestElement, {})
    : Object.keys(objectOrArray).reduce(
      (prev, element) => nestElement(prev, objectOrArray[element], element),
      {},
    );
};

This way for :
input = { 'a':{ 'b':{ 'b2':2 }, 'c':{ 'c2':2, 'c3':3 } } }

You have this result :
{ a.b.b2: 2, a.c.c2: 2, a.c.c3: 3 }

While with @mehrjoo you have this :
{ .a.b.b2: 2, .a.c.c2: 2, .a.c.c3: 3 }

very nicely done! Thank you for this!

anyone can revert this, i want to create object from single-depth object

@edwardEvans094 I found code to reverse this at https://stackoverflow.com/questions/42694980/how-to-unflatten-a-javascript-object-in-a-daisy-chain-dot-notation-into-an-objec

Really useful, thank you!

anybody has an opposite function? to unflatten it?

A Typescript 3.7+ version:

export function flatten<T extends Record<string, any>>(
  object: T,
  path: string | null = null,
  separator = '.'
): T {
  return Object.keys(object).reduce((acc: T, key: string): T => {
    const newPath = [path, key].filter(Boolean).join(separator);
    return typeof object?.[key] === 'object'
      ? { ...acc, ...flatten(object[key], newPath, separator) }
      : { ...acc, [newPath]: object[key] };
  }, {} as T);
}

@guillim
How do I remove the numbers from the keys in an array of objects? I have this fiddle. This data:

var data = {
  "ticker": "AAPL",
  "name": "Apple",
  "data": [
    1,2,3,4
  ],
  "obj": [
    {"revenue": 1, "income": 11},
    {"revenue": 2, "income": 22},
  ],
}

Results in:
["ticker", "name", "data.0", "data.1", "data.2", "data.3", "obj.0.revenue", "obj.0.income", "obj.1.revenue", "obj.1.income"]

I'd like:
["ticker", "name", "data", "data", "data", "data", "obj.revenue", "obj.income", "obj.revenue", "obj.income"]

What an awesome thread. Thanks to everyone here!

I made an improvement from @x47188 version to handle null values and empty [] arrays. Also added the Date and Regex object for the hell of it.

export function flatten<T extends Record<string, any>>(
  object: T,
  path: string | null = null,
  separator = '.'
): T {
  return Object.keys(object).reduce((acc: T, key: string): T => {
    const value = object[key];

    const newPath = [path, key].filter(Boolean).join(separator);

    const isObject = [
      typeof value === 'object',
      value !== null,
      !(value instanceof Date),
      !(value instanceof RegExp),
      !(Array.isArray(value) && value.length === 0),
    ].every(Boolean);

    return isObject
      ? { ...acc, ...flatten(value, newPath, separator) }
      : { ...acc, [newPath]: value };
  }, {} as T);
}

Example: https://stackblitz.com/edit/typescript-shdjoq

I'm wondering how to do it similarly to what @gitty-git-git asks.
But i want to keep arrays as they are unless they have objects, in that case flatten the objects.
For example this:

flatten({a:{b:2},c:[{e:{f:4}}]})

{
  "a.b": 2,
  "c": [
    {
      "e.f": 4
    }
  ]
}

Anyone has an idea? @gitty-git-git did you find a way to do yours?

slighlty modified from @codeBelt to output array indices as [0] instead of as property .0

export function flatten<T extends Record<string, any>>(object: T, path: string | null = null, separator = '.'): T {
  return Object.keys(object).reduce((acc: T, key: string): T => {
    const value = object[key];
    const newPath = Array.isArray(object)
      ? `${path ? path : ''}[${key}]`
      : [path, key].filter(Boolean).join(separator);
    const isObject = [
      typeof value === 'object',
      value !== null,
      !(value instanceof Date),
      !(value instanceof RegExp),
      !(Array.isArray(value) && value.length === 0),
    ].every(Boolean);

    return isObject
      ? { ...acc, ...flatten(value, newPath, separator) }
      : { ...acc, [newPath]: value };
  }, {} as T);
}

Forked example: https://stackblitz.com/edit/typescript-pwsl83

I have put together a simple module, Flatify-obj based on this original gist with some additional tweaks and tests.

Usage

   const flattenObject = require('flatify-obj');

   flattenObject({foo: {bar: {unicorn: '🦄'}}})
   //=> { 'foo.bar.unicorn': '🦄' }

   flattenObject({foo: {unicorn: '🦄'}, bar: 'unicorn'}, {onlyLeaves: true});
   //=> {unicorn: '🦄', bar: 'unicorn'}

For additional features PRs are welcome 🦄

Another one written in TypeScript: tree-to-flat-map.

you are the best!

@danzelbel like a charm!

Jewel!