In my current project using Vue, I am making an API call to retrieve data from my Laravel backend (nova). The returned data is structured in the following way.
The data consists of an array, which contains arrays of objects. Each array represents a record, with each object representing a field within that record.
It is possible for a record to contain unnecessary additional 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 am looking for a way to efficiently flatten this structure using Javascript so that it transforms into:
const data = [
{id: 1, title: 'The Title'},
{id: 2, title: 'The Other Title'}
]
My Attempts So Far
I have experimented with combinations of map and filter functions, but unfortunately, the results fell short of the desired outcome.