how to loop through array of objects and separate nested array of arrays

Question

I have JSON that I currently use for a kendo-ui chart. I need to use the data for a grid so I need to separate the nested data array of arrays into there own object. Javascript or linq.js will work fine. here is the JSON I am starting with.

customSeries = [{
"name": "Chantal Hamlet - Green Castle Homes",
"subId": "10223",
"bldId": "13551",
"data": [
    [179900, 1386],
    [214900, 1440],
    [194500, 1496],
    [217900, 1504],
    [189900, 1542],
    [184900, 1546],
    [192500, 1570]
],

}, {
"name": "Ella Sea Condos - Sahnow Construction",
"subId": "9761",
"bldId": "27380",
"data": [
    [199900, 1500]
]
}, {
"style": "smooth",
"color": "blue",
"data": [
    [20000, 200],
    [40000, 400],
    [40000, 400]
],
"name": "Subject Property"
}]

I need to end up with 2 separate arrays.

First Array

Array1 = [{
"name": "Chantal Hamlet - Green Castle Homes",
"subId": "10223",
"bldId": "13551"

}, {
  "name": "Ella Sea Condos - Sahnow Construction",
  "subId": "9761",
  "bldId": "27380"
}, {
"style": "smooth",
"color": "blue",
"name": "Subject Property"
}]

Second Array

Array2 = [
{
    "data": [
        [179900, 1386],
        [214900, 1440],
        [194500, 1496],
        [217900, 1504],
        [189900, 1542],
        [184900, 1546],
        [192500, 1570]
    ]

}, {
    "data": [
        [199900, 1500]
    ]
}, {
    "data": [
        [20000, 200],
        [40000, 400],
        [40000, 400]
    ]
}

]

Answer 1

You could use Array.prototype.map method.

var Array1 = customSeries.map(function(el) {
  return {
    name: el.name,
    subId: el.subId,
    bldId: el.bldId
  };
});

var Array2 = customSeries.map(function(el) {
  return {
    data: el.data
  };
});

Update:

The above code not work when your elements in customSeries don't have fixed keys except data.

If you using lodash, you could do this:

var Array1 = customSeries.map(function(el) {
  return _.omit(el, 'data');
});

var Array2 = customSeries.map(function(el) {
  return _.pick(el, 'data');
});

Answer 2

You might want to look into using lodash, it has a lot of great functions for manipulating arrays and performing MapReduce functions.

Answer 3

Depending on the length of the array, you might want to do this in a single pass. Using linq.js here won't help much for this, it'll just be added overhead with no real benefit.

If you don't mind obliterating your original data, you can process them both simultaneously by going through each of the items and add a copy of the data array to the second array while deleting the data from the item.

var array1 = data,
    array2 = [];
array1.forEach(function (item) {
    array2.push({
        data: item.data
    });
    delete item.data;
});

If you'd rather keep your original data, you'll have to clone each item as you process them.

var array1 = [],
    array2 = [];
data.forEach(function (item) {
    var noData = yourCloneMethod(item); // replace call with preferred clone method
    delete noData.data;
    array1.push(noData);
    array2.push({
        data: item.data
    });
});