Flatten data from an object with an array of objects

Question

In my Vue project, I'm doing an API call to my Laravel (nova) backend, the data is returned as follows.

As you can see the data is an array, which contains an array of objects. Each array represents a record, while each object represents a field in that record.

There is the possibility that a record has unnecessary data.

const data = [
    [
        {
            attribute: 'id',
            value: 1,
            extra: "not needed data"
        },
        {
            attribute: 'title',
            value: 'The Title',
            extra: "not needed data"
        },
    ],
    [
        {
            attribute: 'id',
            value: 2
        },
        {
            attribute: 'title',
            value: 'The Other Title'
        },
    ],
]

I'm wondering how I can use Javascript to flatten this out so it becomes

const data = [
    {id: 1, title: 'The Title'},
    {id: 2, title: 'The Other Title'}
]

What I've tried

I've tried using a combination of map and filter, but the results don't even come close.

Your input's syntax is not valid. Your desired output's isn't either, actually — CertainPerformance
– CertainPerformance, Commented Aug 9, 2019 at 9:13
Hmh I notice it's invalid but I don't see how.. What am I missing? An object can contain arrays, right? — Miguel Stevens
– Miguel Stevens, Commented Aug 9, 2019 at 9:17
"I've tried using a combination of map and filter..." - You've missed to post this part as well — Andreas
– Andreas, Commented Aug 9, 2019 at 9:17
Yes @Notflip, but it's required to have keys for its values. Just change the outer braces to square brackets [] and it's fine — Jack Bashford
– Jack Bashford, Commented Aug 9, 2019 at 9:18

Kobe · Accepted Answer · 2019-08-09 09:45:45Z

1

You could use map with reduce, to build an object using only the attribute and value, ignoring all other properties:

const data = [
    [
        {
            attribute: 'id',
            value: 1,
            extra: "not needed data"
        },
        {
            attribute: 'title',
            value: 'The Title',
            extra: "not needed data"
        },
    ],
    [
        {
            attribute: 'id',
            value: 2
        },
        {
            attribute: 'title',
            value: 'The Other Title'
        },
    ],
]

console.log(data.map(a => a.reduce((a, o) => (a[o.attribute] = o.value, a), {})))

edited Aug 9, 2019 at 9:45

answered Aug 9, 2019 at 9:40

Kobe

6,4681 gold badge18 silver badges38 bronze badges

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

2 Comments

Miguel Stevens Over a year ago

That's it Kobe! I always wonder how people can think of things like that, I feel like my brain can't understand reduce, or complex maps.. Thanks!

Kobe Over a year ago

@Notflip No worries mate, I've only really just started to get good at using them. If you take time to fully understand how it works, it's a very nice tool to use for data manipulation. If you ever need more help, feel free to ask 👍

Collectives™ on Stack Overflow

Flatten data from an object with an array of objects

What I've tried

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

What I've tried

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related