javascript merge arrays into a single object

Question

I am trying to merge several arrays into a single object that I can then iterate to use in chart.js datasets. I have a set of data that looks like this:

export const data = [
    {
        'name': 'Flow',
        'values': {
            'sent': 410,
            'responded': 253,
            'secured': 65
        }
    }
]

(I limited this to just one, but the dataset is much larger)

Then I have several arrays that I've built based on this data:

this.labels = data.map(item => item.name);
this.colors = ['#439ff4', '#5ec3d5', '#a068e5'];
this.responded = data.map(item => item.values.responded);
this.sent = data.map(item => item.values.sent);
this.secured = data.map(item => item.values.secured);

What I need to do is this:

get the key names (responded, sent, secured) as another array
merge the keys, colors, responded, sent, and secured, arrays into an object called datasets.

this.datasets = [ /* not sure what to do here! */];

Ultimately my chart in chart js is looking for something like this (I have partially hard-coded values at the moment:

datasets: [
    {
        label: 'Sent',
        data: this.sent,
        backgroundColor: '#439ff4'
    },
    {
        label: 'Responded',
        data: this.responded,
        backgroundColor: '#5ec3d5'
    },
    {
        label: 'Secured',
        data: this.secured,
        backgroundColor: '#a068e5'
    }
],

that I would ultimately like to just express as

datasets: this.datasets,

I hope I explained this well enough as to what I am trying to do.

Sayan Pal · Accepted Answer · 2018-01-14 08:39:05Z

Assuming that the key names in data.values stays in lowercase and otherwise it is same as datasets[*].label, you can do something like below.

// the custom type is just for making it more manageable, omit it if you want
type DatasetItem = { label: string, data: number[], backgroundColor: string };

let datasets: Array<Partial<DatasetItem>> = [
    {
        label: 'Sent',
        backgroundColor: '#439ff4'
    },
    {
        label: 'Responded',
        backgroundColor: '#5ec3d5'
    },
    {
        label: 'Secured',
        backgroundColor: '#a068e5'
    }
];    

const data = [
    {
        'name': 'Flow1',
        'values': {
            'sent': 410,
            'responded': 253,
            'secured': 65
        }
    },
    {
        'name': 'Flow2',
        'values': {
            'sent': 411,
            'responded': 254,
            'secured': 66
        }
    }
];

datasets.forEach((item) => item.data = data.map((d) => d.values[item.label.toLowerCase()]));    
console.log(datasets);

Collectives™ on Stack Overflow

javascript merge arrays into a single object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related