how to convert this nested object into a flat object?

Question

Sorry I don't know how to phrase the question title. Please help edit if possible.

I have an object like this:

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

I want to make it look like:

{
    'a': 'jack',
    'b.c': 'sparrow',
    'b.d.e': 'hahaha'
}

// so that I can use it this way:
a['b.d.e']

jQuery is ok too. I know for the nested object, I can use a.b.d.e to get hahaha, but today I have to use it like a['b.d.e'] -_-!!! How can I achieve this? Thanks in advance :)

Marie · Accepted Answer · 2020-03-03T17:47:48.917

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);

zurfyx · Answer 2 · 2017-03-28T22:40:55.063

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>

adiga · Answer 3 · 2019-10-17T18:33:12.833

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.

Just a note that this otherwise great answer considers Date to be objects, while Date should be probably treated like a value in this scenario. — Kuba Wyrostek, Jan 28 '22 at 00:26

score 4 · Answer 4 · answered Dec 29 '15 at 16:56

Recursive is the best solution for this case.

function flatten(input, reference, output) {
  output = output || {};
  for (var key in input) {
    var value = input[key];
    key = reference ? reference + '.' + key : key;
    if (typeof value === 'object' && value !== null) {
      flatten(value, key, output);
    } else {
      output[key] = value;
    }
  }
  return output;
}
var result = flatten({
  a: 'jack',
  b: {
    c: 'sparrow',
    d: {
      e: 'hahaha'
    }
  }
});
document.body.textContent = JSON.stringify(result);

score 4 · Answer 5 · edited Oct 07 '21 at 18:36

Option 1: export a flat object with just the Leaves. i.e object exported contains just paths with primitive value at the end ( see example ) .

//recursion: walk on each route until the primitive value.
//Did we found a primitive?
//Good, then join all keys in the current path and save it on the export object.
export function flatObject(obj) {
    const flatObject = {};
    const path = []; // current path

    function dig(obj) {
        if (obj !== Object(obj))
            /*is primitive, end of path*/
            return flatObject[path.join('.')] = obj; /*<- value*/ 
    
        //no? so this is an object with keys. go deeper on each key down
        for (let key in obj) {
            path.push(key);
            dig(obj[key]);
            path.pop();
        }
    }

    dig(obj);
    return flatObject;
}

Example

let  obj = {aaa:{bbb:{c:1,d:7}}, bb:{vv:2}}
console.log(flatObject(obj))
/*
{
  "aaa.bbb.c": 1,
  "aaa.bbb.d": 7,
  "bb.vv": 2
}
*/

Option 2: export a flat object with all intermidate paths. a little bit shorter and simpler (see example).

export function flatObject(obj) {
    const flatObject = {};
    const path = []; // current path

    function dig(obj) {
        for (let key in obj) {
            path.push(key);
            flatObject[path.join('.')] = obj[key];
            dig(obj[key])
            path.pop();
        }
    }

    dig(obj);
    return flatObject;
}

Example:

let  obj = {aaa:{bbb:{c:1,d:7}}, bb:{vv:2}}
console.log(flatObject(obj))
/*{
  "aaa": {
    "bbb": {
      "c": 1,
      "d": 7
    }
  },
  "aaa.bbb": {
    "c": 1,
    "d": 7
  },
  "aaa.bbb.c": 1,
  "aaa.bbb.d": 7,
  "bb": {
    "vv": 2
  },
  "bb.vv": 2
}
*/

Nina Scholz · Answer 6 · 2020-09-28T10:30:22.213

A recursive approach by using a parameter for parent keys.

const
    getValues = (object, parents = []) => Object.assign({}, ...Object
        .entries(object)
        .map(([k, v]) => v && typeof v === 'object'
            ? getValues(v, [...parents, k])
            : { [[...parents, k].join('.')]: v }
        )
    ),
    object = { a: 'jack', b: { c: 'sparrow', d: { e: 'hahaha' } } };

console.log(getValues(object));

score 1 · Answer 7 · answered Sep 26 '18 at 20:15

1

Just an example how can you achieve that with ES6 features.

const flatObject = obj => {
    const keys = Object.keys(obj)

    return keys.reduce((acc, k) => {
        const value = obj[k]

        return typeof value === 'object' ?
             {...acc, ...ObjectUtils.flatObject(value)} :
             {...acc, [k]: value}
    } , {})
}

answered Sep 26 '18 at 20:15

Bruno Joaquim

1,333
1
11
15

2

Where does ObjectUtils come from? – Rafael Rozon Jan 06 '20 at 21:19
2

i guess the line should be `{...acc, ...flatObject(value)} :` - as a recursive call – muescha Jun 21 '20 at 14:14

score 1 · Answer 8 · answered Jan 06 '19 at 10:51

Another approach using ES6.

const obj = {
  a: "jack",
  b: {
    c: "sparrow",
    d: {
      e: "hahaha"
    }
  }
};

function flattenObj(value, currentKey) {
  let result = {};

  Object.keys(value).forEach(key => {

    const tempKey = currentKey ? `${currentKey}.${key}` : key;

    if (typeof value[key] !== "object") {
      result[tempKey] = value[key];
    } else {
      result = { ...result, ...flattenObj(value[key], tempKey) };
    }
  });

  return result;
}

console.log(flattenObj(obj));

score 0 · Answer 9 · answered Mar 03 '20 at 18:33

var flattenObject = function(ob) {
  var toReturn = {};

  for (var i in ob) {
    if (!ob.hasOwnProperty(i)) continue;

    if ((typeof ob[i]) == 'object' && ob[i] !== null) {
      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];
    }
  }
  console.log(toReturn)
  return toReturn;
};

var ob = {
  'a': {
    'b': {
      'b2': 2
    },
    'c': {
      'c2': 2,
      'c3': 3
    }
  }
};
flattenObject(ob);

Can you please edit your answer so that it explains your solution!? Thanks. — Werner Henze, Mar 03 '20 at 18:53

score 0 · Answer 10 · answered Jun 25 '21 at 14:07

const flatten = function(obj) {
  const result = {};

  for (let key in obj) {
    if (typeof obj[key] === 'object') {
      const childObj = flatten(obj[key]);
    
      for (let childObjKey in childObj) {
        result[`${key}.${childObjKey}`] = childObj[childObjKey];
      }
    } else {
      result[key] = obj[key];
    }
  }
  return result
}

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

console.log(flatten(test));

score 0 · Answer 11 · answered Apr 20 '22 at 13:49

Here is a simple solution -

function flatObj(obj, newObj, parentKey) {
    for(let key in obj) {

        const currKey = parentKey.length > 0 ? `${parentKey}.${key}` : key

        if (typeof obj[key] === "object") {
            flatObj(obj[key], newObj, currKey);
        } else {
            newObj[currKey] = obj[key];
        }
    }

    return newObj;
};

    let obj = {
       a: 'jack',
       b: {
          c: 'sparrow',
          d: {
             e: 'hahaha'
          }
       }
    };

console.log(flatObj(obj, {}, ""));

score 0 · Answer 12 · answered May 10 '22 at 14:53

If you are here to convert nested object like this

{
  a:2,
  b: {
    c:3
  }
}

to this

  {
  a:2,
  c:3
}

than try this Object.assign one line to flat the nested object

Object.assign({}, ...function _flatten(o) { return [].concat(...Object.keys(o).map(k => typeof o[k] === 'object' ? _flatten(o[k]) : ({[k]: o[k]})))}(yourObject))

reference to this post

https://stackoverflow.com/a/33037683/8609844

Wainer Rodriguez · Answer 13 · 2020-03-01T02:11:30.447

-4

Try this

const result = [].concat.apply([], parentArray.map((item: any) => item.any)

edited Mar 01 '20 at 02:11

answered Feb 25 '20 at 00:46

Wainer Rodriguez

51
1
3

1

This isn’t JavaScript, this isn’t about plain objects, and it doesn’t even work for Arrays. There’s no context how this code is supposed to work. And in general, [“try this” answers are not useful](//meta.stackoverflow.com/a/298811/4642212). Please add some explanation. Code-only answers are less useful for future readers and don’t explain the OP’s mistake or how to approach the problem. – Sebastian Simon Oct 15 '21 at 04:17

how to convert this nested object into a flat object?

13 Answers13

Flat NPM package

[Extra] Neater call to the function above

[Extra] Demo

Linked

Related