How do i extract an array in an array to get another array? [duplicate]

Question

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

Hi @TusharShahi, I tried the code above. Updated the question to include what I tried. — Aly
– Aly, Commented Apr 5, 2022 at 6:45
If you only want categoryName and header, what's the the id property in your code? — Phil
– Phil, Commented Apr 5, 2022 at 6:50
TL;DR on the duplicate? You want input.flatMap(({ categoryName, tabs }) => tabs.map(({ header }) => ({ categoryName, header }))) — Phil
– Phil, Commented Apr 5, 2022 at 6:54

Tushar Shahi · Accepted Answer · 2022-04-05 07:05:11Z

1

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));

edited Apr 5, 2022 at 7:05

answered Apr 5, 2022 at 6:56

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

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

1 Comment

Tushar Shahi Over a year ago

Yes correct. Just copy pasted OP's code. Editing

Collectives™ on Stack Overflow

How do i extract an array in an array to get another array? [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related