Create array of objects for a select based on items from a data table

Question

So I have a data table in Vuetify that's containing eventlog items. For example, it looks like this:

[{
        "id": 1,
        "actionBy": "John",
        "eventAction": "CREATED",
        "Description": ""
        "actionDate": "2022-09-02T10:31:57.223765"
    }, {
        "id": 2,
        "actionBy": "Anna",
        "eventAction": "MODIFIED",
        "Description": ""
        "actionDate": "2022-09-07T13:44:29.892831"
    }, {
        "id": 3,
        "actionBy": "Eric",
        "eventAction": "REMOVE_IMAGE",
        "Description": "Test description"
        "actionDate": "2022-09-07T13:44:39.800381"
    }, {
        "id": 4,
        "actionBy": "Sysadmin",
        "eventAction": "REMOVE_IMAGE",
        "Description": "Test description"
        "actionDate": "2022-09-08T09:21:29.272312"
    }, {
        "id": 5,
        "actionBy": "Sysadmin",
        "eventAction": "MODIFIED",
        "Description": "Test description"       
        "actionDate": "2022-09-08T09:21:54.991851"
    }, {
        "id": 6,
        "actionBy": "Sysadmin",
        "eventAction": "REMOVE_IMAGE",
        "Description": "Test description"       
        "actionDate": "2022-09-08T13:55:00.469676"
    }
]

Now I want to use a select(in Vuetify it's a v-select). Where I want to get the select options like this:

[
  { value: 'CREATED', count: 1 },
  { value: 'MODIFIED', count: 2 },
  { value: 'REMOVE_IMAGE', count: 3 },
]

I found some ways, but it doesn't feel really clean. I want to know if there is a efficient way to do this. So it doesn't look dirty. ;-)

Got a function for that. Like: displayTypeText(item) witch (item.eventAction) { case 'CREATED': return 'created'; case 'MODIFIED': return 'modified'; case 'REMOVE_IMAGE: return 'image removed'; ` — Juraj
– Juraj, Commented Sep 14, 2022 at 8:59
Use one of the groupbys here and then convert the object to an array using Object.keys like here? — Yitz
– Yitz, Commented Sep 14, 2022 at 9:59

Yitz · Accepted Answer · 2022-09-14 10:08:49Z

1

You can use a group by from here and a mapping from here to create an array:

computed: {
    selectOptions() {
        const obj = this.events.reduce((ar, x) => {
           ar[x.eventAction] = (ar[x.eventAction] || 0) + 1;
           return ar;
        }, {});
        return Object.keys(obj).map(key => ({value: key, count: obj[key]}));
    }

answered Sep 14, 2022 at 10:08

Yitz

1,3388 silver badges12 bronze badges

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

1 Comment

Juraj Over a year ago

Fantastic! That is really clean. My attempt had like 20 rows of code.. ^_^ Thank you!

Collectives™ on Stack Overflow

Create array of objects for a select based on items from a data table

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related