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 = [
  {
    "id": 1,
    "header": "Chicken Rice",
  },
  {
    "id": 2,
    "header": "Dim sum",
  },
  {
    "id": 3,
    "header": "Pizza"
  },
]

CodePudding user response：

The below solution achieves the assumed target/objective below:

The header always be nested in the same, uniform way. i.e, it will always be in the tabs prop array & the tabs prop will always be present in each object in the input array.

Code Snippet

// extract only 'header', and included 'id'
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
    })
  )
);

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"
    }]
  },
];

console.log(getHeadersWithId(input));

Explanation

Inline comments added to the snippet above.