flat для обьекта на JS

Question

  const options = [
    {
      id: 1,
      nestedOptions: [
        { id: 2 },
        { id: 3 },
        { id: 4 }
      ]
    },
    {
      id: 5,
      nestedOptions: [
        { id: 6 },
        { id: 7 },
        { id: 8 }
      ]
    },
  ]

Как можно промапить масив в такую структуру?

const options = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
]

Answer 1

Для уменьшения вложенности массива есть функция .flatMap, который в коллбэке позволяет получать вложенную коллекцию, однако обычное его применение тут не поможет

const options = [{
    id: 1,
    nestedOptions: [{
        id: 2
      },
      {
        id: 3
      },
      {
        id: 4
      }
    ]
  },
  {
    id: 5,
    nestedOptions: [{
        id: 6
      },
      {
        id: 7
      },
      {
        id: 8
      }
    ]
  },
]

console.log(options.flatMap(o => o.nestedOptions))

Как видно из примера, отсутствуют промежуточные id, которые лежат непосредственно в объекте. Поэтому их нужно добавить руками в возвращаемый массив

const options = [{
    id: 1,
    nestedOptions: [{
        id: 2
      },
      {
        id: 3
      },
      {
        id: 4
      }
    ]
  },
  {
    id: 5,
    nestedOptions: [{
        id: 6
      },
      {
        id: 7
      },
      {
        id: 8
      }
    ]
  },
]

console.log(options.flatMap(({nestedOptions,id}) => [{id}, ...nestedOptions]))

Answer 2

Вот вариант с рекурсией. Но я бы очень хотел услышать мнение насчёт этого варианта. Потому как тут ещё и IIFE, и замыкания... В общем, как-то хз, правильно ли это?

const options = [
{
  id: 1,
  nestedOptions: [
    { id: 2 },
    { id: 3 },
    { id: 4 }
  ]
},
{
  id: 5,
  nestedOptions: [
    { id: 6 },
    { id: 7 },
    { id: 8 }
  ]
},
];

function flat(arr) {
  let res = [];
  
  !function innerFlat(arr) {
    arr.forEach((item, index) => {
      for(let k in item) {
        Array.isArray(item[k]) ? innerFlat(item[k]) : res.push({[k]: item[k]});
      }
    });
  }(arr);
  
  return res;
}

console.log('res', flat(options));

БЛОГ НА HUSL

flat для обьекта на JS

Ответы (2 шт):