What is the best way to transform a JavaScript object into a chain of interconnected links?

Question

What is the best way to transform a JavaScript object into a chain of interconnected links?

My goal is to transform an object structure like the one below...

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 flattened structure as shown below:

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

My initial attempt at this flattening process fell short, mainly due to repetitive code. I realized that a recursive approach is needed to handle nested objects and arrays efficiently. Any suggestions?

EDIT: While similar to other queries, this question focuses on a specific notation and the processing of nested objects and arrays simultaneously.

EDIT: I have also inquired about the reverse operation, unflattening, in another post.

javascript recursion typescript ecmascript-6 flatten

Answer 1

Answer №1

Below is the TypeScript code snippet for flattening data:

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

And here is the JavaScript version of the code:

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

Answer 2

Below is the TypeScript code snippet for flattening data:

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

And here is the JavaScript version of the code:

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

Answer 3

Answer №2

One way to achieve recursion is by creating a function to store keys in a string format.

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

Answer 4

One way to achieve recursion is by creating a function to store keys in a string format.

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

Answer 5

Answer №3

Check out this awesome code snippet to flatten a nested object in JavaScript:

function flattenObject(obj)
{
  var flattenedObj = {};
  (function flatten(element, path) {
    switch (typeof element) {
      case "object":
        path = path ? path + "." : "";
        for (var key in element)
          flatten(element[key], path + key);
        break;
      default:
        flattenedObj[path] = element;
        break;
    }
  })(obj);
  return flattenedObj;
}

var nestedObj = {
  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(flattenObject(nestedObj));

Answer 6

Check out this awesome code snippet to flatten a nested object in JavaScript:

function flattenObject(obj)
{
  var flattenedObj = {};
  (function flatten(element, path) {
    switch (typeof element) {
      case "object":
        path = path ? path + "." : "";
        for (var key in element)
          flatten(element[key], path + key);
        break;
      default:
        flattenedObj[path] = element;
        break;
    }
  })(obj);
  return flattenedObj;
}

var nestedObj = {
  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(flattenObject(nestedObj));

What is the best way to transform a JavaScript object into a chain of interconnected links?

Answer №1

Answer №2

Answer №3

Similar questions

ASP.NET page experiences issues with executing Javascript or jQuery code

Placing jQuery scripts in Blogger platform: A guide

Is it possible for the $.post function to overwrite variables within the parent function?

Error: Unable to locate module: Issue: Unable to find '../components/charts/be.js' in '/vercel/workpath0/my-app/pages'

Floating navigation bar that appears and disappears as you scroll

Unable to retrieve the image

Having trouble including a YouTube iframe code within the document ready function

Utilizing the reduce method to process an object and return a collection of objects

What could be the reason for the ReferenceError that is being thrown in this code, indicating that '

"The Django querydict receives extra empty brackets '[]' when using jQuery ajax post to append items to a list in the app

React Bootstrap Forms: The <Form.Control.Feedback> element is failing to display when the validation is set to false

Leveraging NestJs Libraries within Your Nx Monorepo Main Application

Having trouble implementing server-side rendering with Styled-Components in Next JS

The 'substr' property is not found in the type 'string | string[]'

Does the gltf loader in three.js have compatibility issues with Internet Explorer 11?

I am experiencing difficulty typing continuously into the input box in reactJS

Toggle visibility of various items in a to-do list, displaying only one item at a time with the use of JavaScript

Ways to incorporate forms.value .dirty into an if statement for an Angular reactive form

Inquiring about socket.io: How can an io emit its own signal?

When attempting to send a POST request to /api/users/login, the system returned an error stating that "