How to extend an object with a key in angular js?

Question

myObj is an object which contains some parameters

myObj:
    {
     person: "John", 
     age: "20"
    };

Now, I need to create a new object similar to original object (only slight changes to values), something like

newObj:
    {
     person: "John" + GetVal();
     age: "20" + GetVal();
    };

I tried something like:

var newObj = {};
angular.forEach(myObj,
                    function (value, key) {
                        _.extend(newObj, { key: value + GetVal() });
                    });

But this produces something like,

newObj:
{
  key: "John" + GetVal();
}

But I am expecting an object

newObj:
{
  person: "John" + GetVal();
}

Notice that key is taken as such but instead it should be the parameter name of the original object.

Any ideas how to achieve that ?

I don't know the exact property name of myObj. It could be anything. All I want is a similar object with every property's value modified. — now he who must not be named.
– now he who must not be named., Commented May 3, 2017 at 14:58

Bartek Fryzowicz · Accepted Answer · 2017-05-03 14:58:47Z

1

You can use Object.keys. Please try this:

var myObj = {
     person: "John", 
     age: "20"
};
var newObj = {};

angular.forEach(Object.keys(myObj), function (value, key) {
         newObj[value] = myObj[value] + ' someValue';
     });

console.log(newObj)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

edited May 3, 2017 at 14:58

answered May 3, 2017 at 14:49

Bartek Fryzowicz

6,70420 silver badges29 bronze badges

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

5 Comments

now he who must not be named. Over a year ago

did u mean newObj[key] = myObj[value] + GetVal() ?

Bartek Fryzowicz Over a year ago

No, Object.keys returns an array which items are object key names and you want those values so it should be value. If you use key in such case it will give you array indexes (0, 1 ..)

now he who must not be named. Over a year ago

Great answer. Thanks for the detailed explanation. Understood, tried and worked great :) Bliss...

now he who must not be named. Over a year ago

Having a doubt. What is the difference between using _.extend and simply using newObj[value] = oldObj[value]. Both seems to create a new property called value if one doesn't exist.

Bartek Fryzowicz Over a year ago

_.extend is 'underscore' library method which shallowly copy all the properties in the source objects over to the destination object (check underscore doc for more details: underscorejs.org/#extend). So it's helpful if you want to make a copy of entire object without modifications. In your case there is no need to use it since you iterate over object properties with forEach loop one by one and use them to build new object. You don't need to copy object but to create new object based on another object properties and you don't need any library to add object property in JS :)

Coldiary · Accepted Answer · 2017-05-03 15:09:28Z

1

The problem is key is treated as a litteral not an expression, you must use [key] instead in your solution to make it work.

var myObj = {
  person: 'John',
  age: 20
};

const GetVal = () => 3;

var newObj = {};
angular.forEach(myObj,
    function (value, key) {
        _.extend(newObj, { [key]: value + GetVal() });
    });
console.log(newObj)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Otherwise, using _.each (as in _.extend), you can do the following :

var new_obj = {};
_.each(obj, (v, k) => new_obj[k] = v + getVal())

var obj = {
  person: "John", 
  age: "20"
};

const getVal = () => '_prefix';

var new_obj = {};
_.each(obj, (v, k) => new_obj[k] = v + getVal())

console.log(new_obj)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

edited May 3, 2017 at 15:09

answered May 3, 2017 at 15:02

Coldiary

2582 silver badges6 bronze badges

1 Comment

now he who must not be named. Over a year ago

I did not know that newObj[key] = val would create a new property called key in newObj and then assign a value to it. Now, understood better

Kyle Richardson · Accepted Answer · 2017-05-03 14:54:51Z

0

You could try Object.assign() like this:

var myObj = {
    person: "John", 
    age: "20"
};

function GetVal(val) {
  return val;
}

myObj = Object.assign({}, myObj, {
    person: myObj.person + GetVal(" Lastname"),
    age: myObj.age + GetVal(" years old")
});

console.log(myObj);

You should checkout the documentation on Object.assign() over at MDN. An added benefit of this approach is that your data is not mutated. Avoiding data mutation when possible is always a plus.

answered May 3, 2017 at 14:54

Kyle Richardson

5,6553 gold badges20 silver badges40 bronze badges

2 Comments

now he who must not be named. Over a year ago

the problem is that I don't know the property names of myObj. It could be anything. So, you cannot hardcode the person: and age just like you did above.

Kyle Richardson Over a year ago

My apologies, I didn't see in your question where it mentioned dynamic key names. Definitely use Object.keys() to obtain those keys then. On another note, angular.forEach is much less performant than a simple for loop.

Collectives™ on Stack Overflow

How to extend an object with a key in angular js?

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related