How to MAP an Object Deeply

Question

I want to change somthing in my all values of object let say for example

var a = {a:{c:1},b:2};
desire output :  a = {a:{c:5},b:10} //multiply by 5

I am doing like this

 var m = function n (o){
    return Object.keys(o).map(function(v,i){
        if(o[v] !== null && typeof o[v] === 'object') return n(o[v])
        else return (o[v]*5);
    })
    }

a = m({a:{c:1},b:2})

But getting output of a

[
  [
    5
  ],
  10
]

`map` works on an array and return another array. In your case works on an array of keys and returns an array of numbers (and/or subarrays). — ibrahim mahrir, Sep 15 '17 at 13:36
Maybe check this: https://stackoverflow.com/questions/25333918/js-deep-map-function ? — Guntram, Sep 15 '17 at 13:39
I have checked this, but not able to get desire output @Guntram — Ashutosh Jha, Sep 15 '17 at 13:39

score 5 · Accepted Answer · answered Sep 15 '17 at 13:41

To generate one object from another, people will frequently use reduce:

var a = {a: {c: 1}, b: 2};

var m = function n(o) {
    return Object.keys(o).reduce(function(newObj, key) {
        var value = o[key];
        if (value !== null && typeof value === 'object') {
          newObj[key] = n(value);
        } else {
          newObj[key] = value * 5;
        }
        return newObj;
    }, {});
};
console.log(m(a));

We pass in a new object as the "accumulator" and set properties on it, returning it from the reduce callback each time so it passes through the entire process.

This is sometimes called an "abusage" of reduce, since the value of the accumulator never changes (it's always the same object; the object's state changes, but not the object), whereas normally the reduce callback alters the value passing through it.

If you prefer, forEach closing over the new object is the other common way:

var a = {a: {c: 1}, b: 2};

var m = function n(o) {
    var newObj = {};
    Object.keys(o).forEach(function(key) {
        var value = o[key];
        if (value !== null && typeof value === 'object') {
          newObj[key] = n(value);
        } else {
          newObj[key] = value * 5;
        }
    });
    return newObj;
};
console.log(m(a));

score 0 · Answer 2 · answered Sep 15 '17 at 13:45

You can do it recursively:

var myObj = {a:{c:1},b:2};

function changeChild(obj) {
    var keys = Object.keys(obj);
    keys.forEach(key => {
        if (typeof obj[key] === "object") {
            changeChild(obj[key])
        } else if (typeof obj[key] === "number") {
            obj[key] = obj[key] * 5;
        }
    });
}

changeChild(myObj);

console.log(myObj);

score 0 · Answer 3 · answered Sep 15 '17 at 14:15

A cleaner way...

var m = function (object) {
    for(var key in object) {
        if(!!object[key] && typeof object[key] === 'object') {
            object[key] = m(object[key]);
        } else {
            object[key] *= 5;
        }
    }
    return object;
};

score -1 · Answer 4 · answered Sep 15 '17 at 13:45

Array.map function returns Array..this is the reason...and if you know what to change inside the object, why won't you do it directly?

From my point of view you're doing redundant executions for something really simple.

you're creating an anonymous function, using Object.keys to get a new array (after it iterated your object)

you're using Array.map to create another array from this array and inside it creating (another) anonymous function to iterate the new array, and on every iteration you're creating another 4 conditional branches..

How to MAP an Object Deeply

4 Answers4