How to set properties of an object dynamically in JavaScript

Question

SO I have a JS object that looks something like..

var Monitor=function(parent,params={}){
    this.parent=null;
    this.canvas=null;
    this.width=600;
    this.height=400;
    this.backColor="#252525";
    this.lineColor="#0171a7";
    this.lineWidth=4;
    this.radius=3;

    /* 2017-12-31 **********************************
    Innitialize the monitor class
    ***********************************************/
    this.init=function(parent,params){
        var that=this;
        this.parent=parent;

        //Loop through params and set them.
        $.each(params,function(i,val){
            eval("that."+i+"="+val);
        })
        return this;
    };

    this.init(parent,params);
}

and call it with...

mc=new Monitor(
    $("#monitors"),
    {
        "width":800;
        "height":600,
    }
);

I want to set the properties dynamically in a loop.

However, to get it to work, I have to use eval (Eval is evil... right?). So it there a better way to set properties dynamically?

Don't reinvent the wheel, there's a function for that: check out `$.extend(this, params)` or `Object.assign(this, params)` in vanilla JS (ES6) — Thomas, Dec 31 '17 at 19:55
Possible duplicate of [How do I add a property to a JavaScript object using a variable as the name?](https://stackoverflow.com/questions/695050/how-do-i-add-a-property-to-a-javascript-object-using-a-variable-as-the-name) — Dexygen, Dec 31 '17 at 19:56

score 1 · Answer 1 · answered Dec 31 '17 at 18:52

An example, I wish that help you, no eval

var parent="monitor",
params = {width:600, height:400};

var Monitor = function(parent,params){
    alert(parent);

    for (var key in params) {
        if (params.hasOwnProperty(key)) {
        alert(key + " -> " + params[key]);
        }
        }

}

Monitor(parent,params);

https://fiddle.jshell.net/skppt6go/

score 1 · Accepted Answer · answered Dec 31 '17 at 18:54

Just do it like this:

 that[i]=val;

Here the full working sample:

var Monitor=function(parent,params={}){
    this.parent=null;
    this.canvas=null;
    this.width=600;
    this.height=400;
    this.backColor="#252525";
    this.lineColor="#0171a7";
    this.lineWidth=4;
    this.radius=3;

    /* 2017-12-31 **********************************
    Innitialize the monitor class
    ***********************************************/
    this.init=function(parent,params){
        var that=this;
        this.parent=parent;

        //Loop through params and set them.
        $.each(params,function(i,val){
           // eval("that."+i+"="+val);
          that[i]=val;
        })
        return this;
    };

    this.init(parent,params);
}
 

mc=new Monitor(
    $("#monitors"),
    {
        "width":800,
        "height":600
    }
);
debugger;
console.dir(mc.height);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Muhammad Omer Aslam · Answer 3 · 2017-12-31T19:09:47.907

create a set of options like this inside your function and merge them with your passed options while creating an object you won't need to loop through each option to set it just use $.extend and merge the default options with the passed options via param,

var Monitor = function(params) {
 
  let defaults = {
    parent: null,
    canvas: null,
    width: 600,
    height: 400,
    backColor: "#252525",
    lineColor: "#0171a7",
    lineWidth: 4,
    radius: 3
  };

  let options = $.extend({}, defaults, params);

  /* 2017-12-31 **********************************
  Innitialize the monitor class
  ***********************************************/
  this.init = function() {
      console.log(options);    
    return this;
  };

  this.init();
}


mc = new Monitor({
  parent: $("#monitors"),
  width: 800,
  height: 600,
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to set properties of an object dynamically in JavaScript

3 Answers3