Merging Array keys

Question

The following code loops through two arrays and after the run outputs the following.

GraphCategories = [
"AdminFee",
"AdminFeeVat",
"CaptureCharge",
"CaptureChargeVat",
"CardReplacementFee",
"CardReplacementFeeVat",
"DriverBillAllowFee",
"DriverBillAllowFeeVat",
"FleetSaverFee",
"FleetSaverFeeVat",
"FuncdingInt",
"LostCardProtectionFee",
"LostCardProtectionFeeVat",
"Other",
"OtherVat",
"TransactionCharge",
"TransactionChargeVat",
"TurnkeyFee",
"TurnkeyFeeVat",
"WalletReplacementFee",
"WalletReplacementFeeVat"
];

seriesData = 
[ 
{name: "AdminFee", group: "2019-10", y: 262038},
{name: "AdminFee", group: "2019-11", y: 262038},
{name: "AdminFeeVat", group: "2019-10", y: 39341.4},
{name: "AdminFeeVat", group: "2019-11", y: 39341.4},
{name: "CaptureCharge", group: "2019-10", y: 0},
{name: "CaptureCharge", group: "2019-11", y: 0},
{name: "CaptureChargeVat", group: "2019-10", y: 0}
];

function BuildStacked(seriesData, GraphCategories) {
    var newGraphdata = [];
    seriesData.forEach(function (SeriesVal, SeiresKey) {
        let previousVal = false;
        GraphCategories.forEach(function (GraphVal, GraphKey) {
            if (SeriesVal.name === GraphVal) {
                if (previousVal === false) {
                    console.log(previousVal);
                    console.log(GraphVal);
                    if (previousVal !== GraphVal) {
                        newGraphdata.push({ 'name': SeriesVal.name, 'data': [SeriesVal.y], 'stack': SeriesVal.group });
                        previousVal = SeriesVal.name;
                    } 
                } 
            };
        });
    });

    console.log(newGraphdata);
}

This is the final array generated by the code

Array
0: {name: "AdminFee", data: Array(1), stack: "2019-10"}
1: {name: "AdminFee", data: Array(1), stack: "2019-11"}
2: {name: "AdminFeeVat", data: Array(1), stack: "2019-10"}
3: {name: "AdminFeeVat", data: Array(1), stack: "2019-11"}
4: {name: "CaptureCharge", data: Array(1), stack: "2019-10"}
5: {name: "CaptureCharge", data: Array(1), stack: "2019-11"}
6: {name: "CaptureChargeVat", data: Array(1), stack: "2019-10"}
7: {name: "CaptureChargeVat", data: Array(1), stack: "2019-11"}

End Result should be as follow.

Where values from key 3 and 4 merged into the keys 1 and 2. since name contains an already inserted item


0: {name: "AdminFee", data: Array(1), stack: "2019-10"}
1: {name: "AdminFee", data: Array(1), stack: "2019-11"}
2: {name: "AdminFeeVat", data: Array(1), stack: "2019-10"}
3: {name: "AdminFeeVat", data: Array(1), stack: "2019-11"}

||
||
\/

0: {name: "AdminFee", data: Array(2), stack: "2019-10"}
1: {name: "AdminFee", data: Array(2), stack: "2019-11"}

So the output I am trying to achieve is more or less in the following format

{
        name: 'AdminFee',
        data: [AdminFee.data, AdminFeeVat.data],
        stack: '2019-10'
    }, {
        name: 'AdminFee',
        data: [AdminFee.data, AdminFeeVat.data],
        stack: '2019-11'
    }

The join should happen in data when AdminFee , AdminFeeVat has the same stack/date

So at the end of the day the result should be

0: {name: "AdminFee", data: Array(2), stack: "2019-10"}
1: {name: "AdminFee", data: Array(2), stack: "2019-11"}

I'm struggling to understand what rules you're using for merging data, expected output is great, perhaps also writing it out in plain English would help. — DBS, Nov 11 '19 at 12:03
@DBS I am trying to do so it is hard to explain due to my thinking process, at the end of the day I want data to merge where the name or stack allows them to do so, under conditions that I set, in this case any data that has the name AdminFeeVat should join up with AdminFee of the same stack/date, I am missing a step and dont know if I should map the array and how to effectively do so. My experience is somewhat lacking. Currently My output is as per below the first code. — , Nov 11 '19 at 12:21

Mohammad Reza Esmaeilzadeh · Answer 1 · 2019-11-11T12:55:59.273

you need to use Object and define a key for each row of the result instead of using array.push() and at last if you need array as an output convert it to an array. for example:

newGraphdata.push({ 'name': SeriesVal.name, 'data': [SeriesVal.y], 'stack': SeriesVal.group });

will be converted to:

if (typeof newGraphdata.definedKey == 'undefined') {
    newGraphdata.definedKey ={ 'name': SeriesVal.name, 'data': [SeriesVal.y], 'stack': SeriesVal.group };
}else{
    newGraphdata.definedKey.data.push(SeriesVal.y);
}

and at last you can convert your result to an array as described here: How to convert an Object {} to an Array [] of key-value pairs in JavaScript

also if you are intrested to use proper data type you can see here: https://medium.com/front-end-weekly/es6-map-vs-object-what-and-when-b80621932373

score 0 · Answer 2 · answered Nov 13 '19 at 06:27

This fix is semi dirty but it works, Since I now get the data more or less in the format I need, Just that Highcharts is not grouping or stacking the data so beautifully just yet.

Solution I had for building the array:

function BuildStacked(seriesData, GraphCategories) {
    var newGraphdata = [];
    let i = 0;
    GraphCategories = removeDuplicateUsingSet(GraphCategories);
    GraphCategories.forEach(function (GraphVal, GraphKey) {
        seriesData.forEach(function (SeriesVal, SeiresKey) {
            if (SeriesVal.name === GraphVal) {
                if (SeriesVal.child === 1) {
                    newGraphdata[i] = { name: SeriesVal.name, data: [SeriesVal.y], stack: SeriesVal.group };
                    i++;
                }
                if (SeriesVal.child === 2) {
                    newGraphdata[(i - 2)].data.push(SeriesVal.y);
                    i++;
                }
            };
        });
    });
    newGraphdata = newGraphdata.filter(function (el) {
        return el != null;
    });
    return newGraphdata;
}

Merging Array keys

2 Answers2