How to instantiate JavaScript object with only properties passed in?

Question

I am trying to have a object that takes in fields like this:

var User = function(params) {
    if(params){
        this.id = params.id;
        this.name = params.name;
        ..
    }
}

if a property of a field in the model, it sets them
if it does not match the model it does not get included in the model
if the property is not there it does not set it

So if you do this:

var data = {
    id: 123,
    foo: 'bar'
};

var user = new User(data);

JSON.stringify(user); // { id: 123 }

What's the easiest way to do this? I can only think to do a conditional for each property.

@falsarella the issue was the undefined property. Answer is below to return a parsed stringified version of itself. — Z2VvZ3Vp
– Z2VvZ3Vp, Commented Jun 1, 2015 at 19:19

deceze · Accepted Answer · 2015-06-01 19:06:06Z

2

function (params) {
    var properties = ['id', 'name', ..];
    for (var i = 0, length = properties.length; i < length; i++) {
        var property = properties[i];
        if (params[property]) {
            this[property] = params[property];
        }
    }
}

answered Jun 1, 2015 at 19:06

deceze♦

525k89 gold badges807 silver badges954 bronze badges

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

Comments

falsarella · Accepted Answer · 2015-06-03 20:33:44Z

1

Sincerely, you don't need conditionals. Your attempt is perfectly fine. Just execute the following code:

function User(params, hiddenNew) {
    if (params) {
        //if a property of a field in the model, it sets them
        //if it does not match the model it does not get included in the model
        this.id = params.id;
        this.name = params.name;
    }
    //you can have additional functions here, or add it to its prototype
    this.logMe = function() {
        console.log(this);
    };
    //if the property is not there it does not set it
    for (key in this) {
        if (this[key] == undefined) {
            delete this[key];
        }
    }
    return this;
}
var data = {
    id: 123,
    foo: 'bar'
};

var user = new User(data);
user.logMe(); // testing function

And the user object will be exactly what you want:

User {id: 123}

edited Jun 3, 2015 at 20:33

answered Jun 1, 2015 at 19:11

falsarella

12.5k10 gold badges75 silver badges119 bronze badges

6 Comments

falsarella Over a year ago

Why the downvote? Can the downvoter explain the reason?

deceze Over a year ago

+1 from me. With the behavior of undefined being as it is, this passes the few conditions the OP gave. There's still a difference in the object which may or may not play any role, but largely it's irrelevant whether the property is actually undefined or just undefined.

Z2VvZ3Vp Over a year ago

This is actually the best way to do it. One tweak is to do return JSON.parse(JSON.stringify(this)); in the model. This strips out the undefined automatically. Thanks!

Z2VvZ3Vp Over a year ago

@deceze I don't want the undefined because I am using it to automatically build a query, and so the query would fail.

Z2VvZ3Vp Over a year ago

Turns out this is not as good as I thought, it strips the methods out so I can no longer use User to run its methods after I instantiate it. Going to have to figure out a new pattern. ended up just adding a new method User.prototype.model = function(data){ return JSON.parse(JSON.stringify(new User(data))); }; seems silly, but works.

|

Matías Fidemraizer · Accepted Answer · 2015-06-01 19:51:15Z

1

There's no other way than conditionally-adding them, but you can simplify it.

Since JavaScript is a dynamically-typed language and it also enforces duck-typing, don't expect something like classes that could auto-magically prevent adding unexpected properties.

See the following code snippet for a possible simplification.

function BaseObject() {}

BaseObject.prototype = {
  defineRequiredProperties: function(requiredProperties, propertyMap) {
    if (!(requiredProperties instanceof Array)) {
      throw Error("'requiredProperties` argument must be an array!");
    }

    if (typeof propertyMap == "object") {
      var that = this;

      Object.keys(propertyMap).forEach(function(propertyName) {
        // Better do this because you'll be able to check if a 
        // property exists even if it's defined in the prototype chain
        if (requiredProperties.indexOf(propertyName) > -1) {
          that[propertyName] = propertyMap[propertyName];
        }
      });
    }
  }
};

// As OP requested, this prevents this custom function from being iterated.
// It's still callable but not enumerable
Object.defineProperty(BaseObject.prototype, "defineRequiredProperties", {
    enumerable: false
});

function User(params) {
  this.defineRequiredProperties(["id", "name"], params);
}

// This is effecitvely derive BaseObject (actually, chaining the
// BaseObject prototype) in order to share defineRequiredProperties
// across all your custom prototypes and be DRY (Don't Repeat Yourself)
User.prototype = Object.create(BaseObject.prototype);

var user = new User({
  id: 11,
  name: "Matías",
  lastName: "Fidemraizer"
});

document.getElementById("result").textContent = JSON.stringify(user);

<div id="result"></div>

edited Jun 1, 2015 at 19:51

answered Jun 1, 2015 at 19:04

Matías Fidemraizer

65.1k19 gold badges132 silver badges216 bronze badges

20 Comments

Tom Over a year ago

This doesn't pass the requirement "if the property is not there it does not set it" -- it sets it to null (e.g., remove name: "Matías" and run it)

Z2VvZ3Vp Over a year ago

What @Tom said. if you have the object look like this: this.id = null; this.name = null; this.anotherField = null; you get {"id":11,"name":"Matías","anotherField":null}

Matías Fidemraizer Over a year ago

@PixMach Now it passes the requirement ;) I've updated the code

Matías Fidemraizer Over a year ago

@PixMach Sorry? An unexisting property is undefined, obviously

Matías Fidemraizer Over a year ago

@PixMach Read my last comment. I believe you're wrong, or show me a code snippet where you can prove your statement (for example in jsFiddle.net).

|

Shebangy Dangy · Accepted Answer · 2015-06-01 19:02:27Z

-3

How about you extend the user properties with passed properties? That way anything new will be added to the user. http://api.jquery.com/jquery.extend/

answered Jun 1, 2015 at 19:02

Shebangy Dangy

551 silver badge4 bronze badges

1 Comment

Z2VvZ3Vp Over a year ago

I'm not using jquery, but wouldn't that make the result: { id:123, foo: 'bar', name: null } That's the opposite of what I want.

Collectives™ on Stack Overflow

How to instantiate JavaScript object with only properties passed in?

4 Answers 4

Comments

6 Comments

20 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

20 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related