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.

could you please tell us how your merged multidimensional single array would look like , that will give us fair idea about your requirements. — Anand Jha
– Anand Jha, Commented Jul 24, 2014 at 11:47
it's not clear how you want the data to be afterwars could you write what the result using the above data as input should be? — Rune FS
– Rune FS, Commented Jul 24, 2014 at 11:49
Sorry missed the important part. I have edited my question now. — siddhant Kumar
– siddhant Kumar, Commented Jul 24, 2014 at 11:57

Vishwanath · Accepted Answer · 2014-07-24 12:38:04Z

1

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 
}

edited Jul 24, 2014 at 12:38

answered Jul 24, 2014 at 12:25

Vishwanath

6,0146 gold badges40 silver badges59 bronze badges

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

4 Comments

siddhant Kumar Over a year ago

Thanks. I will try and get the column arrays separately as the 'key' column 'DATE' can be string as well. Consider it as Day wise sell of Apple, Orange and Banana coming in three json objects. so my Key here will be string (Mon, Tue...). I will work with your solution and report back soon.

Vishwanath Over a year ago

Edited answer to include rows and columns seperately.

siddhant Kumar Over a year ago

an small issue, the resulting json has objects with DATE element in last, how can I make it to appear as first element? (for e.g. see below comment by @manji

Vishwanath Over a year ago

Thats why I suggested to use array and updated the answer with it. Order of iteration is not guranteed for objects whereas its guaranteed for arrays. output2 is column array and array of rows.

manji · Accepted Answer · 2014-07-24 13:17:52Z

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

Collectives™ on Stack Overflow

merging Json arrays to multidimensional single array

2 Answers 2

4 Comments

Result:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Result:

Comments

Your Answer

Sign up or log in

Post as a guest

Related