Merge objects dynamically - Object Property Name Issue

Question

I'm trying to merge objects together, or add new objects to existing objects. I've already got it working as for merge using jQuery, but it's the name of the property that wont work dynamically.

The parameter filters is an object, such as {test:123}.

When invoking filter({test:123});, I want the filter function to dynamically add objects to a global object. (and of course can't use push() since its not an array)

this.filter = function(filters) {
  for (var key in filters) {
    $.extend( settings.filter, {key:filters[key]} );
  }
};

The problem is that "key" turns into "key" as the name of the property. When it should be "test" as the property name; I can not get the property name to be created dynamically.

The goal would be to allow the user to fire the function like this:

filter({test:123,test2:1321,test55:4})

and dynamically add objects to the global settings object without the user meddling with the object itself.

Why are you doing it that way instead of just $.extend(settings.filter, filters)? — cookie monster
– cookie monster, Commented Jun 21, 2014 at 18:04
...the exact reason for the issue you describe is very simply that the object initializer syntax can't possibly know that you actually want to use the value of the key variable instead of an actual identifier named key. There are many questions on StackOverflow that address how to create an object with dynamic keys, but it's all beside the point since your approach isn't the way to do it in the first place. — cookie monster
– cookie monster, Commented Jun 21, 2014 at 18:11
@cookiemonster thank you. I dont know why I was trying to do that, I was thinking of arrays and usually in php I foreach or for loop them together, but $.extend( settings.filter, filters ); fixed the problem, makes it simple. Thanks. — tmarois
– tmarois, Commented Jun 21, 2014 at 18:40

score 1 · Accepted Answer · 2014-06-21 18:42:12Z

1

Your code does not work because key is not being interpreted as a variable when being directly set in the object.

$.extend( settings.filter, {key:filters[key]} );

Considering:

var keyName = "Test";
var badObj = { keyName: "Hello World" };

You would get undefined when calling newObj.Test because it is actually newObj.keyName.

In order to use a variable to create a property name, you need to use different syntax.

var keyName = "Test";
var newObj = {};
newObj[keyName] = "Hello World";

You could then reference and use newObj.Test to get "Hello World"

To fix the method you provided, you can adjust it to:

this.filter = function(filters) {
  for (var key in filters) {
   if (filters.hasOwnProperty(key)) {
      var newObj = {};
      newObj[key] = filters[key];
      $.extend(settings.filter, newObj);
    }
  }
};

Keep in mind you can simplify this and just use the extend method. This would be better, unless you are looking to do your own filtering as the method name suggests.

this.filter = function(filters) {
    $.extend(settings.filter, filters);
};

Demos

edited Jun 21, 2014 at 18:42

answered Jun 21, 2014 at 18:37

user3728283

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

1 Comment

tmarois Over a year ago

Thank you. the simple way of just running extend, $.extend(settings.filter, filters); worked perfectly. seems that I was trying to code like I'm doing php arrays.

Serhii Kozachenko · Accepted Answer · 2014-06-21 18:24:11Z

0

You should create temp obj before extend :

this.filter = function(filters) {
  for (var key in filters) {
    var obj = {};
    obj[key] = filters[key];
    $.extend( settings.filter, obj );
  }
};

answered Jun 21, 2014 at 18:24

Serhii Kozachenko

1,40113 silver badges34 bronze badges

Collectives™ on Stack Overflow

Merge objects dynamically - Object Property Name Issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related