Is there a way to transform a complex nested class object into a simple object without losing its methods

Question

Is there a way to transform a complex nested class object into a simple object without losing its methods

Is there a way to convert a deeply nested class object into a plain Object type while still retaining methods like getters and setters?

class A {
    id = "";
    data = {
        sync: {}
    };

}

class SyncService {
    syncResultServiceA = {
        ToSync: 0,
        Synced: 0,
        SyncErrors: [],
    };
    syncResultServiceB = {
        ToSync: 0,
        Synced: 0,
        Errors: [],
    };
}

const a = new A();
a.data.sync = new SyncService();
console.log(a.data.sync.constructor.name) // "SyncService"

I've tried various solutions, like using {...obj} which doesn't work for nested class objects, or using JSON.stringify() + parse() which removes custom methods.

javascript typescript object ecmascript-6

Answer 1

Answer №1

Give this a shot:

class A {
  constructor() {
    this.identifier = '';
    this.content = {
      synchronization: {},
    };
  }

}

class SynchronizationManager {
  constructor() {
    this.syncStatusA = {
      ToSynchronize: 0,
      Synchronized: 0,
      SynchronizationErrors: [],
    };
    this.syncStatusB = {
      ToSynchronize: 0,
      Synchronized: 0,
      Errors: [],
    };
  }
}

const instanceA = new A();
instanceA.content.synchronization = new SynchronizationManager();
console.log(instanceA.content.synchronization.constructor.name) // "SynchronizationManager"

const instanceB = convertToPlainObject(instanceA);
console.log(instanceB.content.synchronization.constructor.name);

function convertToPlainObject(objectClass) {
  const copiedObject = {
    ...objectClass
  };
  for (const [key, value] of Object.entries(copiedObject)) {
    if (typeof value === 'object') {
      copiedObject[key] = convertToPlainObject(value);
    }
  }
  return copiedObject;
}

Answer 2

Give this a shot:

class A {
  constructor() {
    this.identifier = '';
    this.content = {
      synchronization: {},
    };
  }

}

class SynchronizationManager {
  constructor() {
    this.syncStatusA = {
      ToSynchronize: 0,
      Synchronized: 0,
      SynchronizationErrors: [],
    };
    this.syncStatusB = {
      ToSynchronize: 0,
      Synchronized: 0,
      Errors: [],
    };
  }
}

const instanceA = new A();
instanceA.content.synchronization = new SynchronizationManager();
console.log(instanceA.content.synchronization.constructor.name) // "SynchronizationManager"

const instanceB = convertToPlainObject(instanceA);
console.log(instanceB.content.synchronization.constructor.name);

function convertToPlainObject(objectClass) {
  const copiedObject = {
    ...objectClass
  };
  for (const [key, value] of Object.entries(copiedObject)) {
    if (typeof value === 'object') {
      copiedObject[key] = convertToPlainObject(value);
    }
  }
  return copiedObject;
}

Answer 3

Answer №2

To tackle all nested objects and convert them, recursion can be employed. Below is a demonstration:

class A {
    identifier = "";
    data = {
        sync: {}
    };

}

class SyncService {
    syncResultServiceA = {
        ToSync: 0,
        Synced: 0,
        SyncErrors: [],
    };
    syncResultServiceB = {
        ToSync: 0,
        Synced: 0,
        Errors: [],
    };
}
const a = new A();
a.data.sync = new SyncService();
console.log(a.data.sync.constructor.name) // "SyncService"

const toPlain = (o) => {
  if (typeof o === 'object' && !Array.isArray(o)) {
    return {...Object.keys(o).reduce((a, c) => (a[c] = toPlain(o[c]), a), {})};
  }
  return o;
}

const plain = toPlain(a);
console.log(plain.data.sync.constructor.name) // "Object"

Answer 4

To tackle all nested objects and convert them, recursion can be employed. Below is a demonstration:

class A {
    identifier = "";
    data = {
        sync: {}
    };

}

class SyncService {
    syncResultServiceA = {
        ToSync: 0,
        Synced: 0,
        SyncErrors: [],
    };
    syncResultServiceB = {
        ToSync: 0,
        Synced: 0,
        Errors: [],
    };
}
const a = new A();
a.data.sync = new SyncService();
console.log(a.data.sync.constructor.name) // "SyncService"

const toPlain = (o) => {
  if (typeof o === 'object' && !Array.isArray(o)) {
    return {...Object.keys(o).reduce((a, c) => (a[c] = toPlain(o[c]), a), {})};
  }
  return o;
}

const plain = toPlain(a);
console.log(plain.data.sync.constructor.name) // "Object"

Is there a way to transform a complex nested class object into a simple object without losing its methods

Answer №1

Answer №2

Similar questions

Combining meshes results in a lower frame rate

Creating functionality with a native JavaScript plugin within a directive and test suite

The Angular service successfully provides a value, yet it fails to appear on the webpage

What could be causing the lack of change in a dynamic input value in Angularjs?

What is the best way to substitute </br> and <br/> with in a text?

The most effective method for displaying a timestamp in the user's specific timezone using Node.JS

When quickly typing, the input formatting using a computed property in Vue.js is not getting applied

How to access a variable in an Angular Factory's callback function from outside the factory

Utilizing Regex Patterns to Manipulate CSS Attributes

The appearance of the pop-up mask is displayed at lightning speed

Collecting data from an HTML form filled out by users

Effortlessly handle form submission with jQuery AJAX, automatically redirecting upon successful

In JavaScript, you can verify if a specific <input> element is an input-field

registering a back button action in Ionic2 for multiple pages

The custom error page in NextJS is failing to display

The persistent Bulma dropdown glitch that refuses to close

Choosing an SVG Circle Using TypeScript

"Exploring the versatility of NextJS with dynamic route parameters

CanJS utilizes mustache templates to escape HTML tags

Leveraging grunt-develop