How to unflatten a JavaScript object in a daisy-chain/dot notation into an object with nested objects and arrays?

Question

I want to unflatten an object like this...

var obj2 = {
    "firstName": "John",
    "lastName": "Green",
    "car.make": "Honda",
    "car.model": "Civic",
    "car.revisions.0.miles": 10150,
    "car.revisions.0.code": "REV01",
    "car.revisions.0.changes": "",
    "car.revisions.1.miles": 20021,
    "car.revisions.1.code": "REV02",
    "car.revisions.1.changes.0.type": "asthetic",
    "car.revisions.1.changes.0.desc": "Left tire cap",
    "car.revisions.1.changes.1.type": "mechanic",
    "car.revisions.1.changes.1.desc": "Engine pressure regulator",
    "visits.0.date": "2015-01-01",
    "visits.0.dealer": "DEAL-001",
    "visits.1.date": "2015-03-01",
    "visits.1.dealer": "DEAL-002"
};

... into an object with nested objects and arrays like the following:

{
  firstName: 'John',
  lastName: 'Green',
  car: {
    make: 'Honda',
    model: 'Civic',
    revisions: [
      { miles: 10150, code: 'REV01', changes: ''},
      { miles: 20021, code: 'REV02', changes: [
        { type: 'asthetic', desc: 'Left tire cap' },
        { type: 'mechanic', desc: 'Engine pressure regulator' }
      ] }
    ]
  },
  visits: [
    { date: '2015-01-01', dealer: 'DEAL-001' },
    { date: '2015-03-01', dealer: 'DEAL-002' }
  ]
}

Here's my (failed) attempt:

function unflatten(obj) {
    var result = {};

    for (var property in obj) {
        if (property.indexOf('.') > -1) {
            var substrings = property.split('.');

            console.log(substrings[0], substrings[1]);


        } else {
            result[property] = obj[property];
        }
    }

    return result;
};

I quickly started repeating code unnecessarily in order to do the nesting of objects and arrays. This is definitely something that needs recursion. Any ideas?

EDIT: I've also asked the opposite, flatten, in another question.

I have a strong deja vu here. I could swear I've read this question yesterday. -- *Edit: alright, it's the opposite of [yesterday's question](http://stackoverflow.com/questions/42682179/how-to-flatten-a-javascript-object-into-a-daisy-chain-like-form).* — John Weisz, Mar 09 '17 at 12:18
The previous question was about flatten, this one is about `unflatten`. Feels like some home tasks — Andrey, Mar 09 '17 at 12:24

score 25 · Accepted Answer · answered Mar 09 '17 at 13:03

25

You can first use for...in loop to loop object properties, then split each key at . then use reduce to build nested properties.

var obj2 = {"firstName":"John","lastName":"Green","car.make":"Honda","car.model":"Civic","car.revisions.0.miles":10150,"car.revisions.0.code":"REV01","car.revisions.0.changes":"","car.revisions.1.miles":20021,"car.revisions.1.code":"REV02","car.revisions.1.changes.0.type":"asthetic","car.revisions.1.changes.0.desc":"Left tire cap","car.revisions.1.changes.1.type":"mechanic","car.revisions.1.changes.1.desc":"Engine pressure regulator","visits.0.date":"2015-01-01","visits.0.dealer":"DEAL-001","visits.1.date":"2015-03-01","visits.1.dealer":"DEAL-002"}

function unflatten(data) {
  var result = {}
  for (var i in data) {
    var keys = i.split('.')
    keys.reduce(function(r, e, j) {
      return r[e] || (r[e] = isNaN(Number(keys[j + 1])) ? (keys.length - 1 == j ? data[i] : {}) : [])
    }, result)
  }
  return result
}

console.log(unflatten(obj2))

answered Mar 09 '17 at 13:03

Nenad Vracar

118,580
15
151
176

Line 8 of this script is gnarly, it's tough to make out what's happening. What does the `r[e] = isNan(...` do? Front of a ternary is boolean, does an assignment return something? – ohsully Jul 18 '20 at 06:37
@ohsully `isNaN(Number(keys[j + 1]))` checks if the next key is a number or not when converted from a string to a number. If it returns true that means its not a number and then you evaluate another condition to see if its last key or not and assign either value or an empty object. But if it returns false then it is a number and then it assigns an array. – Nenad Vracar Jul 18 '20 at 09:52
So if you have key like this `car.revisions.0.miles` first two parts (car and revisions) are not numbers, third part is a number and last part is not a number. – Nenad Vracar Jul 18 '20 at 09:53

Dan Prince · Answer 2 · 2017-03-09T12:50:07.770

Try breaking the problem down into two distinct challenges:

Setting a value by path
Looping over an object and unflattening the keys one by one

You might start with a setIn function that would look something like this:

function setIn(path, object, value) {
  let [key, ...keys] = path; 

  if (keys.length === 0) {
    object[key] = value;
  } else {
    let nextKey = keys[0];
    object[key] = object[key] || isNaN(nextKey) ? {} : [];
    setIn(keys, object[key], value);
  }

  return object;
}

Then combine it with an unflatten function which loops over an object running setIn for each key.

function unflatten(flattened) {
  let object = {};

  for (let key in flattened) {
    let path = key.split('.');
    setIn(path, object, flattened[key]);
  }

  return object;
}

Of course, there's already an npm package for doing this, and it'd also it'd be easy to implement your own using functions like _.set from lodash.

It's unlikely that you'd ever run into a long enough path that you'd end up running out of stack frames, but of course it's possible to implement setIn without recursion, using loops or trampolines.

And finally, if immutable data is your thing and you want to work with a version of setIn that doesn't modify your data structures, then you could take a look at the implementation in Zaphod—a JavaScript library for treating the native data structures as though they were immutable.

You have an error. It should be `object[key] = object[key] || (isNaN(nextKey) ? {} : []);`, or simply `object[key] ??= isNaN(nextKey) ? {} : [];` — ruohola, Apr 12 '23 at 17:22

Luis Amor · Answer 3 · 2022-06-23T08:51:58.557

You can use lodash library with keys and set functions to build a cleaner code.

The idea is, you can transform each entry in a object with .set and merge it in a global object.

const messages = {
        "firstName": "John",
        "lastName": "Green",
        "car.make": "Honda",
        "car.model": "Civic",
        "car.revisions.0.miles": 10150,
        "car.revisions.0.code": "REV01",
        "car.revisions.0.changes": "",
        "car.revisions.1.miles": 20021,
        "car.revisions.1.code": "REV02",
        "car.revisions.1.changes.0.type": "asthetic",
        "car.revisions.1.changes.0.desc": "Left tire cap",
        "car.revisions.1.changes.1.type": "mechanic",
        "car.revisions.1.changes.1.desc": "Engine pressure regulator",
        "visits.0.date": "2015-01-01",
        "visits.0.dealer": "DEAL-001",
        "visits.1.date": "2015-03-01",
        "visits.1.dealer": "DEAL-002"
};

const unflatten = (flattedObject) => {
    let result = {}
    _.keys(flattedObject).forEach(function (key, value){    
        _.set(result, key, flattedObject[key])        
    })
    return result
}

console.log(unflatten(messages))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

Nina Scholz · Answer 4 · 2017-03-09T12:36:51.687

You could walk the splitted substrings and a temporary object with a check if the key exists and build a new property with a check for the next property if it is a finite number, then assign an array, otherwise an object. At last assign with the last substring the value to the temp object.

function unflatten(obj) {
    var result = {}, temp, substrings, property, i;
    for (property in obj) {
        substrings = property.split('.');
        temp = result;
        for (i = 0; i < substrings.length - 1; i++) {
            if (!(substrings[i] in temp)) {
                if (isFinite(substrings[i + 1])) { // check if the next key is
                    temp[substrings[i]] = [];      // an index of an array
                } else {
                    temp[substrings[i]] = {};      // or a key of an object
                }
            }
            temp = temp[substrings[i]];
        }
        temp[substrings[substrings.length - 1]] = obj[property];
    }
    return result;
};

var obj2 = { "firstName": "John", "lastName": "Green", "car.make": "Honda", "car.model": "Civic", "car.revisions.0.miles": 10150, "car.revisions.0.code": "REV01", "car.revisions.0.changes": "", "car.revisions.1.miles": 20021, "car.revisions.1.code": "REV02", "car.revisions.1.changes.0.type": "asthetic", "car.revisions.1.changes.0.desc": "Left tire cap", "car.revisions.1.changes.1.type": "mechanic", "car.revisions.1.changes.1.desc": "Engine pressure regulator", "visits.0.date": "2015-01-01", "visits.0.dealer": "DEAL-001", "visits.1.date": "2015-03-01", "visits.1.dealer": "DEAL-002" };

console.log(unflatten(obj2));

.as-console-wrapper { max-height: 100% !important; top: 0; }

A slightly more compact version could be this

function unflatten(object) {
    var result = {};
    Object.keys(object).forEach(function (k) {
        setValue(result, k, object[k]);
    });
    return result;
}

function setValue(object, path, value) {
    var way = path.split('.'),
        last = way.pop();

    way.reduce(function (o, k, i, kk) {
        return o[k] = o[k] || (isFinite(i + 1 in kk ? kk[i + 1] : last) ? [] : {});
    }, object)[last] = value;
}

var obj2 = { "firstName": "John", "lastName": "Green", "car.make": "Honda", "car.model": "Civic", "car.revisions.0.miles": 10150, "car.revisions.0.code": "REV01", "car.revisions.0.changes": "", "car.revisions.1.miles": 20021, "car.revisions.1.code": "REV02", "car.revisions.1.changes.0.type": "asthetic", "car.revisions.1.changes.0.desc": "Left tire cap", "car.revisions.1.changes.1.type": "mechanic", "car.revisions.1.changes.1.desc": "Engine pressure regulator", "visits.0.date": "2015-01-01", "visits.0.dealer": "DEAL-001", "visits.1.date": "2015-03-01", "visits.1.dealer": "DEAL-002" };

console.log(unflatten(obj2));

.as-console-wrapper { max-height: 100% !important; top: 0; }

score 0 · Answer 5 · answered Sep 20 '22 at 05:18

const data = {
  firstName: 'John',
  lastName: 'Green',
  'car.make': 'Honda',
  'car.model': 'Civic',
  'car.revisions.0.miles': 10150,
  'car.revisions.0.code': 'REV01',
  'car.revisions.0.changes': '',
  'car.revisions.1.miles': 20021,
  'car.revisions.1.code': 'REV02',
  'car.revisions.1.changes.0.type': 'asthetic',
  'car.revisions.1.changes.0.desc': 'Left tire cap',
  'car.revisions.1.changes.1.type': 'mechanic',
  'car.revisions.1.changes.1.desc': 'Engine pressure regulator',
  'visits.0.date': '2015-01-01',
  'visits.0.dealer': 'DEAL-001',
  'visits.1.date': '2015-03-01',
  'visits.1.dealer': 'DEAL-002',
};

const objKeys = Object.keys(data);

function assign(obj, keys, val) {
  const lastKey = keys.pop();
  const lastObj = keys.reduce((obj, key) => (obj[key] = obj[key] || {}), obj);
  lastObj[lastKey] = val;
}

const final = objKeys.reduce((acc, cv) => {
  if (!cv.includes('.')) {
    acc[cv] = data[cv];
  }

  const keys = cv.split('.');
  assign(acc, keys, data[cv]);

  return acc;
}, {});

console.log({ final });

score 0 · Answer 6 · answered Apr 03 '23 at 18:16

type tsAppendableObj = { [key: string]: any }
const test = {
    r_0_0_1: {
        component: 'header_hosted_by',
        langs: 'header_hosted_by',
    },
    r_0_0_2: {
        component: 'header_lang',
        langs: '',
    },
    r_0_0_2_0: {
        component: 'header_lang_en',
        langs: 'header_lang_en',
    },
    r_0_0_2_1: {
        component: 'header_lang_fr',
        langs: 'header_lang_fr',
    },
    r_0: {
        component: 'title',
        langs: 'info_page_title',
    },
    r_0_0: {
        component: 'header',
        langs: 'api_version',
    },
    r_0_0_0: {
        component: 'header_date',
        langs: 'header_date',
    },
}

function unflatten2(data: tsAppendableObj, separator: string) {
    let result = <tsAppendableObj>{}
    let temp = <tsAppendableObj>{}
    let temp2 = <tsAppendableObj>{}
    let levels = <tsAppendableObj>{}
    let property
    let i

    for (property in data) {
        levels = property.split(separator)
        let gg = levels[0]
        temp = result
        for (i = 1; i < levels.length; i++) {
            gg = gg + separator + levels[i]
            if (!temp[gg]) {
                temp[gg] = {
                    main: {},
                    items: {},
                }
            }
            if (i === levels.length - 1) temp[gg].main = data[property]
            temp = temp[gg].items
        }
    }
    return result
}

console.log(unflatten2(test, '_'))

if works in unordered lists, and it gives a more friendly main/items structure with full keys so you can more or less recursively iterate trough it... can be improved ... — Dexterial, Apr 03 '23 at 18:18

How to unflatten a JavaScript object in a daisy-chain/dot notation into an object with nested objects and arrays?

6 Answers6

Linked