How can i merge two nested javascript objects?

Question

I am currently using the code below:

function mergeFaculty(json){
    tempList = $.extend(tempList, json);
    console.log(JSON.stringify(tempList));
}

However, it does not work.

the objects are the following:

{"modulos":{"id":"1","name":" Usuarios","paginas":{"id":"1","name":" Listado Usuarios","facultades":{"id":"1","name":" ver"}}}}

{"modulos":{"id":"1","name":" Usuarios","paginas":{"id":"1","name":" Listado Usuarios","facultades":{"id":"2","name":" editar"}}}}

any idea why it doesn't work?

What should the result look like?

Phil
– Phil

2017-03-09 00:19:10 +00:00
Commented Mar 9, 2017 at 0:19 — Phil
– Phil, Commented Mar 9, 2017 at 0:19

Larpee · Accepted Answer · 2017-03-09 00:22:06Z

3

Try changing your extend function to this: $.extend(true, tempList, json);, it should allow a deep merge

answered Mar 9, 2017 at 0:22

Larpee

8401 gold badge8 silver badges19 bronze badges

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

14 Comments

Phil Over a year ago

Link to doco ~ api.jquery.com/jquery.extend/…

Larpee Over a year ago

@Phil Yes, that the doc I used, thanks for adding it

Tyler Roper Over a year ago

Look like the faculty is overridden, not combined: jsfiddle.net/32haeup2/1

000 Over a year ago

Combined how? What is the "expected" way to combine? The question is vague in that regard. If the facultades is meant to become an array or something, then why not paginas become an array as well? What's the heuristic for combining vs overriding?

Larpee Over a year ago

@Santi I don't understand, would you mind explaining?

|

Z-Bone · Accepted Answer · 2017-03-09 01:48:38Z

First of all I think that you have a problem with your object structure, since your facultades key is an object and not an array. You should use an array if you wish to hold both facultades objects after the extension.

That said, it seems $.extend even overrides arrays, meaning it will choose the array of the latest object passed as an argument to this function. So this isn't good for you, as the array will still hold one of the 2 objects in facultades.

To correctly merge arrays we could use the $.merge function, but that is only good for arrays. Since you have a JSON object in hand this won't work.

As a result, what I did was simply write my own recursive code to utilize both features: a deep copy extend function and a merge function in case of an array.

Hope you find this useful to achieve what you wanted (explanations in comments):

var tempList = {"modulos":{"id":"1","name":" Usuarios","paginas":{"id":"1","name":" Listado Usuarios","facultades":[{"id":"1","name":" ver"}]}}}
var secondObject = {"modulos":{"id":"1","name":" Usuarios","paginas":{"id":"1","name":" Listado Usuarios","facultades":[{"id":"2","name":" editar"}]}}}

// Deep extend recursive function
function deepExtend(firstObject, secondObject, tempObject) {
    tempObject = typeof tempObject === "undefined" ? {} : tempObject;

    // Flattens multidimensional arrays
    function flatten(array) {
        if (array.length) {
            return array.reduce(function(prev, cur) {
                return prev.concat(cur)
            })
        }
    }
    // Iterates over both object, extends and merges them
    function iterateObjects(object1, object2) {
        var keys = Object.keys(object1);
        for (var i = 0; i < keys.length; i++) {
            var key = keys[i];
            var firstObjectValue = object1[key];
            var secondObjectValue = object2[key];

            if (firstObjectValue.constructor === Array) {
                tempObject[key] = []
                // Flatten arrays from each object
                flatten(firstObjectValue) ? tempObject[key].push(flatten(firstObjectValue)) : null;
                flatten(secondObjectValue) ? tempObject[key].push(flatten(secondObjectValue)) : null;

            } else if (firstObjectValue.constructor === Object) {
                tempObject[key] = deepExtend(firstObjectValue, secondObjectValue, {})
            } else {
                tempObject[key] = object2[key] || object1[key]
            }
        }
        return tempObject;
    }
    // Extend in both orders to find unique keys that appear only in one object
    tempObject = iterateObjects(firstObject, secondObject, tempObject);
    tempObject = iterateObjects(secondObject, firstObject, tempObject);

    return tempObject;
}


function mergeFaculty(json) {
    //tempList = $.merge(  tempList, json);
    tempList = deepExtend(tempList, json);
    console.log(JSON.stringify(tempList));
}

mergeFaculty(secondObject);

Collectives™ on Stack Overflow

How can i merge two nested javascript objects?

2 Answers 2

14 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related