Advanced Javascript: Partial cloning of an object graph

Question

On the client side I have a complex Javascript object that I work with. but when sending it to the server I would like to send only part of it over.

I thought to clone it but only those parts that I require. I want a function that does the trick like

var wireFriendly = reduce(original, "id, name, related.id, related.name");
// or
var wireFriendly = reduce(original, ["id", "name", "related.id", "related.name"]);

What I've done so far

I've already created majority of this function that does what I require when object graphs consists of objects only. If I have arrays inside it won't work. but here's what I got so far:

function (entity, keepMembersList) {
    // check entity that it's not undefined, null and that it's an actual Object instance
    if (Object.prototype.toString.call(entity) !== "[object Object]")
    {
        throw "'entity' parameter should be a non-null object."
    }

    // code in switch statement only normalizes function arguments when
    // they are provided either as a string or as an array of string
    switch (Object.prototype.toString.call(keepMembersList))
    {
        case '[object String]':
            keepMembersList = keepMembersList.split(',').map(function (value) {
                return value.trim();
            });
        case '[object Array]':
            keepMembersList = keepMembersList.map(function (value) {
                return value.split(".");
            });
            break;
        default:
            throw "Parameter 'keepMembersList' should either be a comma delimited list of members' names to keep or an array of them.";
    }

    // from this point on, cloning is taking place
    var result = {};

    for (var i = 0; i < keepMembersList.length; i++)
    {
        for (var j = 0, r = result, e = entity; j < keepMembersList[i].length - 1; j++)
        {
            // ----------------------------------------------------------
            // this part should be changed to also detect array notations
            // ----------------------------------------------------------
            r = r[keepMembersList[i][j]] = r[keepMembersList[i][j]] || {};
            e = e[keepMembersList[i][j]];
        }
        r[keepMembersList[i][j]] = e[keepMembersList[i][j]];
    }

    return result;
}

I would like it to also work in these couple of examples

// clone all array elements with specific members
var wireFriendly = reduce(original, "id, name, related[].id, related[].name");
// clone specific array element with specific members
var wireFriendly = reduce(original, ["id", "name", "related[0].id", "related[0].name"]);

but I can live with at least the first example where all elements of an array are being member-reduced. Second example that would only clone specific array elements is not as important for my case but I suppose it would be great to have it as well. Of course indexes on the resulting array don't have to match in this case otherwise we'd have with undefined elements:

//in case related[3].id would be specified we'd end up with
related:[undefined, undefined, undefined, { id: 1 }];

Example data

Use this object as original entity that needs to be partially cloned:

var original = {
    "related":[{
        "related":[],
        "id":1759807323,
        "name":"Related name",
        "interest":{
            "id":1314962015,
            "name":"Ideas",
            "isLocked":false,
            "isPrivileged":false
        },
        "details":"Lengthy related details that will not be sent to server"
    }],
    "name":"My name",
    "interest":{
        "id":1314962015,
        "name":"Ideas",
        "isLocked":false,
        "isPrivileged":false
    },
    "details":"Some lengthy details"
}

You can test a working example using this function in this JSFiddle.

Answer 1

Solution

I'm providing my own answer for future reference. The resulting solution is a two step process:

1. flatten multi-level object hierarchy to a single level while filtering properties to desired set
2. unflatten single-level object back to multi-level instance

mind that this creates a reduced shallow copy of original object as I don't manipulate it any further accidentally changing original object. If you need to have a clone, you can either add additional functionality to flatten or unflatten function by detecting dates, regexes and others that actually need new instances created.

Test object (above in the question) looks like this after it's flattened:

var flattened = {
    "name": "My name",
    "details": "Some lengthy details",
    "interest.id": 1314962015,
    "interest.name": "Ideas",
    "interest.isLocked": false,
    "interest.isPrivileged": false,
    "related[0].related": [],
    "related[0].id": 1759807323,
    "related[0].name": "Related name",
    "related[0].interest.id": 1314962015,
    "related[0].interest.name": "Ideas",
    "related[0].interest.isLocked": false,
    "related[0].interest.isPrivileged": false,
    "related[0].details": "Lengthy related details that will not be sent to server"
};

Properties get renamed to represent multi-level objects.

Flatten function

I've tried several different version from iterative using stack to recursive. This one performs best.

// "keep" is a HashMap-like object detailed later
function flatten(obj, keep) {

    // normalize parameters
    keep = keep || { contains: function () { return true; } };

    var result = {};

    var traverse = function (current, prefix) {
        switch (Object.prototype.toString.call(current))
        {
            case "[object Object]":
                for (var prop in current)
                {
                    traverse(current[prop], (prefix.length ? prefix + "." : "") + prop);
                }
                // when there were no properties it's an empty object instance
                if (!prop && keep.contains(prefix))
                {
                    result[prefix] = {};
                }
                break;
            case "[object Array]":
                // arrays
                for (var i = 0, l = current.length; i < l; i++)
                {
                    traverse(current[i], (prefix.length ? prefix : "") + "[" + i + "]");
                }
                // when there were no elements it's an empty array instance'
                if (l === 0 && keep.contains(prefix))
                {
                    result[prefix] = [];
                }
                break;
            case "[object Null]":
            case "[object Undefined]":
            case "[object Function]":
                // don't use nulls, undefineds or functions
                break;
            default:
                // primitive values: string, number, boolean, date, regexp
                if (keep.contains(prefix))
                {
                    result[prefix] = current;
                }
        }
    };

    traverse(obj, "");
    return result;
};

Unflatten function

Fastest unflattening is by using indexOf and substring functions rather than split and iterating through generated arrays.

// "obj" is a flattened object instance
var unflatten = function unflatten(obj) {
    var result = {},
        current,
        prop,
        currIdx,
        normalized;

    for (var props in obj)
    {
        normalized = props.replace(/\[(\d+)\]/gi, ".$1");
        current = result;
        currIdx = -2;
        while (currIdx !== -1)
        {
            prop = normalized.substring(
                ++currIdx,
                (currIdx = normalized.indexOf(".", currIdx)) !== -1 ? currIdx : undefined
            );
            if (currIdx > 0)
            {
                current = current[prop] || (current[prop] = isNaN(parseInt(normalized.substring(currIdx + 1))) ? {} : []);
            }
        }
        current[prop] = obj[props];
    }

    return result;
};

HashMap-like type

As you've seen in flatten function keep parameter is of type HashMap that has contains function. When you don't provide any keep parameter flatten will keep all properties hence default keep instance at the beginning of the function.

var hashMapRx = /\[\d*\]/gi;

// Fast dictionary-like searching
var HashMap = function constructor(stringArray) {
    this.hash = {};

    for (var i = 0, l = stringArray.length; i < l; i++)
    {
        this.hash[this.normalize(stringArray[i])] = true;
    }
};

HashMap.prototype.contains = function contains(value) {
    var val = this.normalize(value);
    return !!this.hash[val] || this.any(val);
};

HashMap.prototype.normalize = function normalize(value) {
    return value.replace(hashMapRx, "[]");
};

HashMap.prototype.any = function any(value) {
    var result = false;
    for (var key in this.hash)
    {
        if (value === key || value.substr(0, key.length) === key)
            return true;
    }
    return false;
};

When instantiating HashMap and providing an array of strings in the form of

["id", "name", "addresses[0].street", "addresses[].country" ...]

these names het normalized. I've deliberately provided here one property with array index (0) and the other without. They both get normalized to version without the index. So when flattening happens, all array items are included as per their property definition.

Reduction becomes as simple as calling:

var reducedObj = unflatten(flatten(obj, keep));