arrays - How to delete subarrays but keep their contents in Javascript?

Question

I have the following array of objects:

const pages = [
  {
    posts: {
      pageInfo: { 
        hasNextPage: true 
      },
      edges: [
        { id: 1 },
        { id: 2 }
      ]
    }
  },
  {
    posts: {
      pageInfo: { 
        hasNextPage: true 
      },
      edges: [
        { id: 3 },
        { id: 4 }
      ]
    }
  },
]

I need to keep only the content of the edges subarrays, like this:

const postsOnly = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
  { id: 4 }
]

Closest I've come is:

const postsOnly = pages.map( ( { posts } ) =>  posts.edges ) 

But this leaves me with a subarray for every original posts object, like this:

const postsOnly = [
  [
    { id: 1 },
    { id: 2 }
  ],
  [
    { id: 3 },
    { id: 4 }
  ]
]

How can I delete these subarrays but keep their contents?

Answer 1

You can either use map(...).flat() or flatMap(...) to flatten the result

const pages = [
  {
    posts: {
      pageInfo: { 
        hasNextPage: true 
      },
      edges: [
        { id: 1 },
        { id: 2 }
      ]
    }
  },
  {
    posts: {
      pageInfo: { 
        hasNextPage: true 
      },
      edges: [
        { id: 3 },
        { id: 4 }
      ]
    }
  },
];

const postsOnly = pages.map( ( { posts } ) =>  posts.edges );
const postsOnly2 = pages.flatMap( ( { posts } ) =>  posts.edges );
const postsOnly3 = pages.map( ( { posts } ) =>  posts.edges ).flat();

console.log(postsOnly);
/* Output: 
[ [ { id: 1 }, { id: 2 } ], [ { id: 3 }, { id: 4 } ] ]
*/
console.log(postsOnly2);
/* Output:
[ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 } ]
*/
console.log(postsOnly3);
/* Output:
[ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 } ]
*/