Como nivelar o Array aninhado?

Question

Como nivelar a matriz aninhada na matriz?

Aqui está o exemplo de matriz de entrada,

const input = [
{
   id: 1,
   name: 'Charles',
   otherFields: [{
       id: 2,
       name: 'Pung',
   }, {
       id: 3,
       name: 'James',
   }]
}, {
   id: 4,
   name: 'Charles',
   otherFields: [{
       id: 5,
       name: 'Pung',
   }, {
       id: 6,
       name: 'James',
   }]
}

]

Matriz de saída que desejo obter.

[{
   id: 1,
   name: 'Charles'
}, {
   id: 2,
   name: 'Pung',
}, {
   id: 3,
   name: 'James',
}, {
   id: 4,
   name: 'Charles'
}, {
   id: 5,
   name: 'Pung',
}, {
   id: 6,
   name: 'James',
}]

Eu quero de alguma forma obter a saída em uma instrução como

input.map((sth) => ({...sth??, sth.field...})); // I'm not sure :(

Answer 1

Com flatMapvocê pode retirar a otherFieldspropriedade e retornar uma matriz contendo o item pai e a outra matriz:

const input = [{
  id: 1,
  name: 'Charles',
  otherFields: [{
    id: 2,
    name: 'Pung',
  }, {
    id: 3,
    name: 'James',
  }]
}];
console.log(
  input.flatMap(({ otherFields, ...item }) => [item, ...otherFields])
);

Answer 2

Para mais de um nível, você pode usar uma abordagem recursiva de nivelamento.

const
    flat = ({ otherFields = [], ...o }) => [o, ...otherFields.flatMap(flat)],
    input = [{ id: 1, name: 'Charles', otherFields: [{ id: 2, name: 'Pung' }, { id: 3, name: 'James', otherFields: [{ id: 4, name: 'Jane' }] }] }],
    result = input.flatMap(flat);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }