Extract a property inside of an array of objects which is inside of another array of objects and have the result as an array of strings

Question

I have a TypeScript array of objects with the following structure:

const surveyResponses: any[] = [
  {createdAt: new Date(), responses: [{questionId: 'input1', response: 'Bla'}]},
  {createdAt: new Date(), responses: [{questionId: 'input1', response: 'Blo'}]}
];

I would like to extract the response property inside of the responses array and have them as a single array of strings.

Expected result: ['Bla', 'Blo']

I have tried to follow these advices:

1. From an array of objects, extract value of a property as array
2. Returning only certain properties from an array of objects in Javascript

I have tried to use reduce without luck:

responses.reduce((a, o) => (o.responses.map(r => r.response) && a.push(o.responses.map(r => r.response)), a), []);

I have tried to use map without luck:

responses.map(r => r.responses).map(r => r.map(r => r.response));
Result: [["Bla"], ["Blo"]]

Any help would be appreciated.

Answer 1

Use flatMap to take the responses array, take their response strings, and combine them:

const surveyResponses = [
  {createdAt: new Date(), responses: [{questionId: 'input1', response: 'Bla'}]},
  {createdAt: new Date(), responses: [{questionId: 'input1', response: 'Blo'}]}
];

const result = surveyResponses.flatMap(
  item => item.responses.map(
    ({ response }) => response
  )
);
console.log(result);

Also note that using any defeats the whole point of using TypeScript, since it effectively disables type-checking for that expression. When possible, either let TS infer the type of an expression automatically, or denote the type yourself manually when you need to. (In this case, TS can infer the type of surveyResponses automatically just fine)

If you can't use flatMap, you can spread into concat:

const surveyResponses = [
  {createdAt: new Date(), responses: [{questionId: 'input1', response: 'Bla'}]},
  {createdAt: new Date(), responses: [{questionId: 'input1', response: 'Blo'}]}
];

const result = [].concat(...surveyResponses.map(
  item => item.responses.map(
    ({ response }) => response
  )
));
console.log(result);

Answer 2

In my opinion, an even simpler option using flatMap. You can always polyfill it if its not available.

const result = surveyResponses.flatMap(r => r.responses).map(r => r.response)
console.log(result)