How add methods from a class to a JSON object

Question

I have a class defined in Javascript with some members and methods. I also have a JSON object that has the same member variables as my class but, obviously, not the methods. What is the easiest way to convert my JSON object to an instance of the class?

Below some code that explains better my case. I've tried to use Object.assign without success. Can this be done in a one liner?

function Thing(a, b){
	this.a = a;
  this.b = b;
  
  this.sum = function(){ return this.a + this.b; };
  
  this.printSum = function(){ console.log (this.sum()); };
};

// test it works
z = new Thing(4,3);
z.printSum(); // shows 7

// attempt with Object.assign
y = JSON.parse('{"a": 5, "b": 4}'); // initialize y from JSON object
console.log(y);
Object.assign(y, new Thing()); // trying to copy methods of Thing into y
console.log(y); // shows both a and b undefined (assign overwrited also a and b)
y.printSum(); // shows NaN

// trying Object.assing the other way around
y = JSON.parse('{"a": 5, "b": 4}');
Object.assign(new Thing(), y); // trying the other way around
console.log(y); // methods from thing are not present now
y.printSum(); // gives error y.printSum is not a function (obvious, as it is not present)

If you use class syntax you don't need Object.assign. You can use the constructor to construct your instance! — Kokodoko
– Kokodoko, Commented Nov 28, 2017 at 11:27

31piy · Accepted Answer · 2017-11-28 11:27:46Z

1

You rather need to change the sum function to make it return sum of this.a and this.b.

Also, instead of Object.assign, you need to change the prototype of the variable y so that the methods are available to it.

function Thing(a, b){
	this.a = a;
  this.b = b;
  
  this.sum = function(){ return this.a + this.b; };
  
  this.printSum = function(){ console.log (this.sum()); };
};

// test it works
z = new Thing(4,3);
z.printSum(); // shows 7

// attempt with Object.assign
y = JSON.parse('{"a": 5, "b": 4}'); // initialize y from JSON object
console.log(y);
y.__proto__ = new Thing(); // trying to copy methods of Thing into y
console.log(y); // shows both a and b undefined (assign overwrited also a and b)
y.printSum();

answered Nov 28, 2017 at 11:27

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

joanlofe Over a year ago

I forgot the 'this' in the function sum, that was a typo. I will correct it.

joanlofe Over a year ago

By the way, your answer works like a charm and it is kind of the one liner I was looking for. Thanks!

joanlofe Over a year ago

Only add that __proto__ is the pre ES6 way of doing it, know it is preferrable to use Object.setPrototypeOf (as per Mozilla docs ).

Mikhail Katrin · Accepted Answer · 2017-11-28 11:58:50Z

1

Do you mind to make some changes? Lets change Thing input params to Object. And then you can easily pass parsed json into it.

Is it suitable for you?

function Thing(obj) {
  
  this.a = obj.a;
  this.b = obj.b;
  
  this.sum = function(){ return this.a + this.b; };
  
  this.printSum = function(){ console.log (this.sum()); };
};

y = JSON.parse('{"a": 5, "b": 4}');
t = new Thing(y);
t.printSum();

It possible to add object as optinal param:

function Thing(a, b, obj = null) {
  if (!obj) {
    this.a = a;
    this.b = b;
  } else {
    this.a = obj.a;
    this.b = obj.b;
  }
  

  this.sum = function(){ return this.a + this.b; };

  this.printSum = function(){ console.log (this.sum()); };
};

y = JSON.parse('{"a": 5, "b": 4}');
t = new Thing(null, null, y);
t.printSum();

tt = new Thing(5, 4);
t.printSum();

edited Nov 28, 2017 at 11:58

answered Nov 28, 2017 at 11:24

Mikhail Katrin

2,4041 gold badge12 silver badges17 bronze badges

1 Comment

joanlofe Over a year ago

This is a solution I have considered, but I need to mantain the constructor like Thing(a, b) and I cannot overload it to have also Thing(obj). I was looking for some way of simply adding the methods from Thing y lacks (since it already has all member variables).

Collectives™ on Stack Overflow

How add methods from a class to a JSON object

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related