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

When working with flattened objects that use dot notation (like "car.make" or "visits.0.date"), you often need to convert them back into nested objects and arrays. This process is called "unflattening" and is useful when working with form data, APIs, or database results.

The Problem

Suppose we have a flattened object like this:

const obj = {
    "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("Flattened object:", obj);

Flattened object: {
  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'
}

Expected Output

We need to transform this into a nested structure with objects and arrays:

const output = {
    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' }
    ]
};

Unflatten Function Implementation

const unflatten = (obj = {}) => {
    const result = {};
    let 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])) {
                    temp[substrings[i]] = [];
                } else {
                    temp[substrings[i]] = {};
                }
            }
            temp = temp[substrings[i]];
        }
        temp[substrings[substrings.length - 1]] = obj[property];
    }
    return result;
};

// Example usage
const obj = {
    "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(JSON.stringify(unflatten(obj), undefined, 4));

{
    "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"
        }
    ]
}

How It Works

The function works by:

• Splitting each property key by dots to get path segments
• Traversing the result object, creating nested objects or arrays as needed
• Using isFinite() to detect numeric indices and create arrays
• Setting the final value at the deepest nested level

Conclusion

This unflatten function converts dot-notation flattened objects into proper nested structures with arrays and objects. It's particularly useful for processing form data or API responses that use flat key structures.