How to flatten a JavaScript object into a daisy chain like form?

Question

I want to flatten an object like this...

var obj1 = {
  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' }
  ]
};

... into a daisy chain form like the following:

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

Here's my (failed) attempt:

function flatten(obj) {
    var flattenObject = {};

    // iterate given object
    for (let x in obj) {
        if (typeof obj[x] == 'string') {
            flattenObject[x] = obj[x];
        }

        if (typeof obj[x] == 'object') {
            for (let y in obj[x]) {
                flattenObject[x + '.' + y] = obj[x][y];
            }
        }
    }

    return flattenObject;
}

I quickly started repeating code unnecessarily in order to daisy chain inner objects and arrays. This is definitely something that needs recursion. Any ideas?

EDIT: This question is similar to other questions but not a duplicate. This question requires a specific notation and nested objects and arrays at the same time.

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

Are you sure you want `car.revisions.0.miles` over `car.revisions[0].miles`? I ask because [tag:asp-net.mvc] will use the second one natively (however you haven't tagged that so I'm asking first). — Erik Philips, Mar 08 '17 at 21:48
Possible duplicate of [Fastest way to flatten / un-flatten nested JSON objects](http://stackoverflow.com/questions/19098797/fastest-way-to-flatten-un-flatten-nested-json-objects) — Jordan Running, Mar 08 '17 at 21:49
@ErikPhilips car.revisions.0.miles is the result I'm looking for — nunoarruda, Mar 08 '17 at 21:49
Possible duplicate of [Convert complex JavaScript object to dot notation object](http://stackoverflow.com/questions/13218745/convert-complex-javascript-object-to-dot-notation-object) — Jordan Running, Mar 08 '17 at 21:50

score 3 · Answer 1 · answered Jan 05 '22 at 12:26

Here's my code (typesciprt)

export const flatten = (data: object, prefix: string = '') => {
  const result: { [key: string]: string | number | null } = {};

  Object.entries(data).forEach(([key, value]) => {
    if (typeof value === 'object') {
      Object.assign(result, flatten(value, `${prefix}${key}.`));
    } else {
      result[`${prefix}${key}`] = value;
    }
  });

  return result;
};

javascript version

export const flatten = (data, prefix = '') => {
  const result = {};

  Object.entries(data).forEach(([key, value]) => {
    if (typeof value === 'object') {
      Object.assign(result, flatten(value, `${prefix}${key}.`));
    } else {
      result[`${prefix}${key}`] = value;
    }
  });

  return result;
};

score 2 · Accepted Answer · answered Mar 08 '17 at 21:37

You can create recursive function like this, and its important to store previous keys in one string.

var obj1 = {
  firstName: 'John',
  lastName: 'Green',
  car: {
    make: 'Honda',
    model: 'Civic',
    revisions: [
      { miles: 10150, code: 'REV01', changes: 0},
      { 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' }
  ]
};

function flatten(data, c) {
  var result = {}
  for(var i in data) {
    if(typeof data[i] == 'object') Object.assign(result, flatten(data[i], c + '.' + i))
    else result[(c + '.' + i).replace(/^\./, "")] = data[i]
  }
  return result
}

console.log(JSON.stringify(flatten(obj1, ''), 0, 4))

score 0 · Answer 3 · answered Mar 08 '17 at 21:45

try this:

function flatten(obj)
{
  var result = {};
  (function f(e, p) {
    switch (typeof e) {
      case "object":
        p = p ? p + "." : "";
        for (var i in e)
          f(e[i], p + i);
        break;
      default:
        result[p] = e;
        break;
    }
  })(obj);
  return result;
}

var obj1 = {
  firstName: 'John',
  lastName: 'Green',
  car: {
    make: 'Honda',
    model: 'Civic',
    revisions: [{
      miles: 10150,
      code: 'REV01',
    }, {
      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'
  }]
};

console.log(flatten(obj1));

How to flatten a JavaScript object into a daisy chain like form?

3 Answers3

Linked