merging Json arrays to multidimensional single array

Question

I have below JSON from API which I don't have control on so changing the format is not possible. I'm struggling to merge this JSON data into single json array.

My requirement is to display Grid Data with multiple series as multi-column something like

DATE | Euler GT2 | Newton | Copernicus GT

Edit: JSON merged would be something like this

"seriesData": [
      {
        "DATE": "2013-12-10T00:00:00",
        "Euler GT2": 10.0,
Newton": 45.0,
Copernicus GT": 100.0,
      },
..]

Moreover, the names of column would be dynamic (e.g. DATE, Euler GT2 comes in JSON and not known during design time)

The web API JSON as below -

jQuery21007295361300930381_1406200781162([
  {
    "seriesName": "Station All Cached0",
    "seriesData": [
      {
        "DATE": "2013-12-10T00:00:00",
        "Euler GT2": 10.0
      },
      {
        "DATE": "2013-12-10T01:00:00",
        "Euler GT2": 11.0
      },
      {
        "DATE": "2013-12-10T02:00:00",
        "Euler GT2": 0.59
      }

    ]
  },
  {
    "seriesName": "Station All Cached1",
    "seriesData": [
      {
        "DATE": "2013-12-10T00:00:00",
        "Newton": 45.0
      },
      {
        "DATE": "2013-12-10T01:00:00",
        "Newton": 34.0
      },
      {
        "DATE": "2013-12-10T02:00:00",
        "Newton": 47.0
      }
    ]
  },
  {
    "seriesName": "Station All Cached2",
    "seriesData": [
      {
        "DATE": "2013-12-10T00:00:00",
        "Copernicus GT": 100.0
      },
      {
        "DATE": "2013-12-10T01:00:00",
        "Copernicus GT": 0.0
      },
      {
        "DATE": "2013-12-10T02:00:00",
        "Copernicus GT": 100.0
      }
    ]
  }
])

It can be complex in sense there could be multiple columns per seriesData as well. for example Series 1 contains column 'Date | column1| column2... so on' but it would be easier if I start with 2 columns.

Answer 1

Merge script:

var merged = (function(key){
    var res = [];

    for(var i=0;i<data.length;i++){
        for(var j=0;j<data[i].seriesData.length;j++){
            var obj = data[i].seriesData[j];
            for(var prop in obj){
                if(prop != key && obj.hasOwnProperty(prop)) {
                    if(res[obj[key]] === undefined){
                        res[obj[key]] = {};
                        res[obj[key]][key] = obj[key];
                        res.push(obj[key]);
                    }
                    res[obj[key]][prop] = obj[prop];
                }
            }
        }
    }

    for(var k=0;k<res.length;k++){
        var date = res[k];
        res[k] = res[date];
        delete res[date];
    }

    return res;
})('DATE');

Result:

[
  {
    "DATE": "2013-12-10T00:00:00",
    "Euler GT2": 10,
    "Newton": 45,
    "Copernicus GT": 100
  },
  {
    "DATE": "2013-12-10T01:00:00",
    "Euler GT2": 11,
    "Newton": 34,
    "Copernicus GT": 0
  },
  {
    "DATE": "2013-12-10T02:00:00",
    "Euler GT2": 0.59,
    "Newton": 47,
    "Copernicus GT": 100
  }
]

Demo: JSFiddle

Answer 2

Following modification will give you the data in format expected by you. But I suggest that you get the column arrays(since they maintain the order) seperate and data rows seperate. That is much cleaner and semantic data for table/grid use case as given in output2

//Data here
var data = {.....}
var columns = {'DATE' : true};
var columnArray = ['DATE'];
var dateDataMap = {};

for(var i=0; i<data.length; i++){
    var dataArray = data[i].seriesData;
    for(var j=0; j<dataArray.length; j++){
        var dataPoint = dataArray[j];
        for(var index in dataPoint){
            if(index!=='DATE'){
                if(!columns[index]){
                    columns[index] = true;
                    columnArray.push(index);
                }

                dateDataMap[dataPoint['DATE']] = dateDataMap[dataPoint['DATE']] || {};
                dateDataMap[dataPoint['DATE']][index] = dataPoint[index];

            }
        }
    }
}

var finalDataArray = [];
for(var dateIndex in dateDataMap){
    var dataPoint = dateDataMap[dateIndex];
    dataPoint['DATE'] = dateIndex;
    finalDataArray.push(dataPoint);
}

var rows = [];


var output = {seriesData : finalDataArray};


for(var i=0; i<finalDataArray.length; i++ ){
    var dataPoint = finalDataArray[i];
    var row = [];
    for(var colIndex=0; colIndex<columnArray.length; colIndex++){
        row.push(dataPoint[columnArray[colIndex]]);
    }
    rows.push(row)
}

var Output2 = {
    column : columnArray,
    rows : rows 
}