Simplification of multi level object array in JavaScript

Question

I have a JavaScript array:

var data = [{abc: "vf",def: [{ a:"1", b:"3"},{a:"2",b:"4"}]}];

I want it to convert to:

[{"abc":"vf","a":"1","b":"3"},{"abc":"vf","a":"2","b":"4"}]

I have written the JavaScript code for it:

Javascript:

    var push_apply = Function.apply.bind([].push);
    var slice_call = Function.call.bind([].slice);

    Object.defineProperty(Array.prototype, "pushArrayMembers", {
        value: function() {
            for (var i = 0; i < arguments.length; i++) {
                var to_add = arguments[i];
                for (var n = 0; n < to_add.length; n+=300) {
                    push_apply(this, slice_call(to_add, n, n+300));
                }
            }
        }
    });

var globalResultArr = [];
var data = [{abc: "vf",def: [{ a:"1", b:"3"},{a:"2",b:"4"}]}];
function f(){
    for(var i=0;i<data.length;i++){    //Iterate Data Array
        var obj = data[i];
        var resultArray = [{}];
        for (var key in obj) {          // Iterate Object in Data Array
            if (obj.hasOwnProperty(key)) {
                if(Object.prototype.toString.call(obj[key]) === "[object Array]"){
                    var tempRes = $.extend(true, [], resultArray);
                    resultArray = [];
                    for(var k=0;k<tempRes.length;k++){
                        var tempResObj = tempRes[k];
                        for(var j=0;j<obj[key].length;j++){ // If it has array, then iterate it as well
                            var innerObj = obj[key][j]; //Iterate Object in inner array
                            for(var innerkey in innerObj){
                                if (innerObj.hasOwnProperty(innerkey)) {
                                    tempResObj[innerkey] = innerObj[innerkey];
                                }
                            }
                            resultArray.push(tempResObj);
                        }
                    }
                }else{
                    for(var i=0;i<resultArray.length;i++){
                        resultArray[i][key] = obj[key];
                    }
                }
            }
        }
        globalResultArr.pushArrayMembers(resultArray);
    }
    document.getElementById("test").innerHTML = JSON.stringify(globalResultArr);
}

f();

HTML:

<div id="test"></div>

Issue is that browser crashes when item in data array > 10000. How can i make this work? Is there any simpler approach?

JSFiddle

I think Codereview would be a better place for this question than stackoverflow — maja, Dec 25 '14 at 08:18
Do you want [{"abc":"vf","a":"1","b":"3"},{"abc":"vf","a":"2","b":"4"}] or really [{"abc":"vf","a":"2","b":"4"},{"abc":"vf","a":"2","b":"4"}]? — Ty Kroll, Dec 25 '14 at 08:28
@TyKroll It seems there is mistake in code. What is want is: [{"abc":"vf","a":"1","b":"3"},{"abc":"vf","a":"2","b":"4"}] . I will edit the question. Thanks for pointing it out. — Gautam Kumar, Dec 25 '14 at 08:31
will you have only two fields in your `objects` `abc` and `def` ? — Mritunjay, Dec 25 '14 at 08:41

Ty Kroll · Accepted Answer · 2014-12-25T12:13:44.283

Here's an attempt. It assumes there is only one property in each object that is an array. It them composes an object with the remaining properties and makes a new clone with each value from the array property.
* Works as required now *

var resultArray = [],
    len = data.length,
    tempObj,
    newObj,
    targetVal,
    targetKey,
    composeObj,
    tempJson,
    key,
    i, k;

for(i = 0; i < len; i++) {
    tempObj = data[i];
    // obj to build up
    composeObj = {};
    // look at all key/vals in obj in data
    for(key in tempObj) {
        keyObj = tempObj[key];
        // is it an array?
        if(Array.isArray(keyObj)) {
            // save key/val for array property
            targetVal = keyObj;
            targetKey = key;
        }
        else {
            // copy non-array properties to empty object
            composeObj[key] = keyObj;
        }
    }
    // json-ify the object for cloning
    tempJson = JSON.stringify(composeObj);
    // compose new object for each val in array property
    targetVal.map(function(val) {
        // clone object
        newObj = JSON.parse(tempJson);
        // add array values as object properties
        for(k in val) {
            newObj[k] = val[k];
        }
        // add to results
        resultArray.push(newObj);
    });
}

Simplification of multi level object array in JavaScript

1 Answers1