Как при рекурсивном переборе древовидных объектов вызывать fetch на каждый item и на выходе получать измененный массив?

Question

[Алексей]

Есть массив

const data = [
  {
    id: 1122029,
    children: [
      {
        id: 1122028,
        children: [
          {
            id: 1122027,
            children: []
          },
          {
           id: 1122022,
            children: []
          },
          {
            id: 1122022,
            children: []
          },
        ]
      }
    ]
  }
];

Есть функция fetch, которая дергает по id и возвращает некоторые данные.

const fetchOptions (id) => {
  return fetch(`url${id}`).then(result => {
/* тут создаю объект на основе result и возвращаю его*/
    return data
  })
}

Перебираю массив так:

const addingOptions = (array) => {
  array.forEach(item => {
    fetchOptions(item.id);
    
    if (item.children.length) {
      addingOptions(item.children)
    }
  })
}

На выходе хочу получить массив с объектами с доп.полями которые добавляются в функции fetchOptions
И этот массив прокинуть дальше.
Кажется тут нужно использовать Promise, но не могу разобраться как правильно это сделать.
Как дождаться выполнения всех асинхронных запросов и вернуть измененный массив?

Answer 1

[0xD34F]

async function addOptions(arr) {
  const result = [];

  for (const item of arr) {
    result.push({
      ...item,
      options: await fetchOptions(item.id),
      children: await addOptions(item.children),
    });
  }

  return result;
}

Answer 2

[Дмитрий Беляев]

const addingOptions = arr => Promise.all(arr.map(
    item => Promise.all([
        fetchOptions(item.id),
        item.children.length ? addingOptions(item.children) : []
    ]).then(([options, children]) => ({
        ...item,
        options,
        children
    }))
));