Search code examples
javascriptandroidangularjsextend

angular.extend - Error when passing a variable as a key

I've got a strange question, which I can't explain.

I have the following code:

if (groupsCtrl.groups[groupsCtrl.groupslug].members) {
   angular.extend(groupsCtrl.groups[groupsCtrl.groupslug].members, {[friend.key]: true});
} else {
   groupsCtrl.groups[groupsCtrl.groupslug].members = {[friend.key]: true};
}

The code works great in firefox & chrome. However, when I run it in my mobile android browser on the phone my whole site crashes and just shows a white line. I found out that is because of this line:

angular.extend(groupsCtrl.groups[groupsCtrl.groupslug].members, {[friend.key]: true});

Specifically the [friend.key] is the root of the problem. I guess it's a compatibility issue, is there a workaround for this? This didn't work either:

var friendkey = friend.key;
angular.extend(groupsCtrl.groups[groupsCtrl.groupslug].members, {[friendkey]: true});

Thank you very much! I'm still a newbie so sorry if this is obvious for you, tried to search as well but am not sure what to search for.

Solution

  • Its kind of thumb rule in all programming language, that you can not define the object property name dynamically while creating object. Same rule gets applied in JavaScript on JSON, object, etc.

    The best way to solve this problem would be, do create an object which you wanted to extend before passing it to extend function. The core problem ob creating object property dynamically, you could set the object key just by accessing using bracket notation.

    Code

    var tempObject = {}; //creating temp object
tempObject[friend.key] = true; //adding dynamic key with value.
if (groupsCtrl.groups[groupsCtrl.groupslug].members) {
   angular.extend(groupsCtrl.groups[groupsCtrl.groupslug].members, object);
} else {
   groupsCtrl.groups[groupsCtrl.groupslug].members = object;
}