How do I extract the array in an array and structure it to be one whole array?
Input:
const input = [{
categoryName: "Chinese food",
tabs: [{
header: "Chicken Rice",
content: "Hainanese chicken rice is a dish of poached chicken and seasoned rice"
},
{
header: "Dim sum",
content: "large range of small Chinese dishes that are traditionally enjoyed in restaurants"
}
]
},
{
categoryName: "Italian food",
tabs: [{
header: "Pizza",
content: "Dish of Italian origin consisting of a usually round"
}]
},
]
Output (Need to extract all the headers out to become this array)
const output = [
{
"categoryName": "Chinese food",
"header": "Chicken Rice",
},
{
"categoryName": "Chinese food",
"header": "Dim sum",
},
{
"categoryName": "Italian food",
"header": "Pizza"
},
]
tried this but i can't seem to add categoryName inside
const getHeadersWithId = arr => (
arr.flatMap( // iterate over 'input' array and 'flat'-ten the result
({tabs}) => (tabs.map( // de-structure 'tabs' & iterate over it
({header}) => ({header}) // de-structure 'header' & retain it to intermediate-result array
))
).map(
({header}, idx) => ({ // iterate with index 'idx'
id: idx+1, // generate the 'id' and store
header // header from intermediate-result array element
})
)
);
This is what I got when I run this chunk of code
[
{
"id": 1,
"header": "Chicken Rice"
},
{
"id": 2,
"header": "Dim sum"
},
{
"id": 3,
"header": "Pizza"
}
]
You don't need the second map() in my opinion. Just use the categoryName and pass it into your inner map().
Building up on your code:
const input = [{
categoryName: "Chinese food",
tabs: [{
header: "Chicken Rice",
content: "Hainanese chicken rice is a dish of poached chicken and seasoned rice"
},
{
header: "Dim sum",
content: "large range of small Chinese dishes that are traditionally enjoyed in restaurants"
}
]
},
{
categoryName: "Italian food",
tabs: [{
header: "Pizza",
content: "Dish of Italian origin consisting of a usually round"
}]
},
]
const getHeadersWithId = arr => (
arr.flatMap( // iterate over 'input' array and 'flat'-ten the result
({tabs,categoryName}) => tabs.map( // de-structure 'tabs' & iterate over it
({header}) => ({header,categoryName}) // de-structure 'header' & retain it to intermediate-result array
)
)
);
console.log(getHeadersWithId(input));