Casting plain objects to class instances in javascript

by

Creating an object in JavaScript requires the invocation of its constructor. So, at first you will need to find the correct arguments, which may not always be just properties. After that, you can reassign all public properties from the JSON-parsed object to the created instances.

A general solution would be that every constructor accepts any objects that look like instances (including real instances) and clones them. All the internal logic needed to create proper instances will be located in the right place then.

Or even better than overloading the constructor might be to create a static method on your class that takes objects and creates instances from them:

Person.fromJSON = function(obj) {
    // custom code, as appropriate for Person instances
    // might invoke `new Person`
    return …;
};

Your case is very simple, as you don’t have any arguments and only public properties. To change {personName:John,animals:[]} to an object instance, use this:

var personLiteral = ... // JSON.parse("...");
var personInstance = new Person();
for (var prop in personLiteral)
    personInstance[prop] = personLiteral[prop];

You can also use Object.assign functionality (or e.g. jQuery.extend pre-ES6) for this:

var personInstance = Object.assign(new Person(), personLiteral);

The creation of the Animal instances works analogous.

As JSON does not transport any information about the classes, you must know the structure before. In your case it will be:

var persons = JSON.parse(serverResponse);
for (var i=0; i<persons.length; i++) {
    persons[i] = $.extend(new Person, persons[i]);
    for (var j=0; j<persons[i].animals; j++) {
        persons[i].animals[j] = $.extend(new Animal, persons[i].animals[j]);
    }
}

Btw, your run methods seems likely to be added on the Animal.prototype object instead of each instance.

More Related Contents:

  1. Converting byte array to string in javascript
  2. TypeScript enum to object array
  3. How do I add an integer value with javascript (jquery) to a value that’s returning a string?
  4. how do an infinite loop in javascript
  5. When should I use a return statement in ES6 arrow functions
  6. Evaluating a string as a mathematical expression in JavaScript
  7. How to turn a String into a JavaScript function call? [duplicate]
  8. detect back button click in browser [duplicate]
  9. How to enable cors nodejs with express?
  10. JavaScript, Node.js: is Array.forEach asynchronous?
  11. Functions that return a function
  12. Textarea onchange detection
  13. Promises for promises that are yet to be created without using the deferred [anti]pattern
  14. Defining read-only properties in JavaScript
  15. “Origin null is not allowed by Access-Control-Allow-Origin” in Chrome. Why? [duplicate]
  16. Do I need to remove event listeners before removing elements?
  17. Take elements while a condition evaluates to true (extending ElementArrayFinder)
  18. Why does Node.js’ fs.readFile() return a buffer instead of string?
  19. What are “decorators” and how are they used?
  20. Change HTML form ‘input’ type by JavaScript
  21. How to window.scrollTo() with a smooth effect
  22. Can I prevent phone from sleep on a webpage
  23. Javascript – Precedence in hoisting
  24. Placeholder for contenteditable div
  25. Why is “javascript:” pseudo-protocol stripped from URL bar when pasted?
  26. puppeteer wait for page/DOM updates – respond to new items that are added after initial loading
  27. JavaScript: using constructor without operator ‘new’
  28. In web browsers, what’s the difference between onblur and onfocusout?
  29. Google maps API V3 method fitBounds()
  30. moment.js isValid function not working properly

Leave a Comment