Как правильно составить массив с данными?

Question

[Дима Паутов]

https://jsfiddle.net/o3402uze/

Есть у меня 2 модели с данными из которых нужно получить 3ю.

Модель с компонентами

const components = [
	{
		id: 1,
		name: 'Box1',
		type: 'Box',
		props: {},
		elements: [],
	},
	{
		id: 2,
		name: 'Box2',
		type: 'Box',
		props: {},
		elements: [],
	},
	{
		id: 3,
		name: 'Box3',
		type: 'Box',
		props: {},
		elements: [],
	},
	{
		id: 4,
		name: 'Box4',
		type: 'Box',
		props: {},
		elements: [],
	},
	{
		id: 5,
		name: 'Box5',
		type: 'Box',
		props: {},
		elements: [],
	},
]

Модель связей компонентов друг с другом

В этой модели указаны id компонентов и их вложенность друг в друга

const structure = [
	{
		id: 1,
		children: [
			2,
			3,
		],
	},
	{
		id: 2,
		children: [
			4,
		],
	},
	{
		id: 3,
		children: [
			5,
		],
	},
	{
		id: 4,
		children: [],
	},
	{
		id: 5,
		children: [],
	},
]

Нужно получить следующую модель данных:

[
	{
		id: 1,
		name: 'Box1',
		type: 'Box',
		props: {},
		elements: [
			{
				id: 2,
				name: 'Box2',
				type: 'Box',
				props: {},
				elements: [
					{
						id: 4,
						name: 'Box4',
						type: 'Box',
						props: {},
						elements: [],
					},
				],
			},
			{
				id: 3,
				name: 'Box3',
				type: 'Box',
				props: {},
				elements: [
					{
						id: 5,
						name: 'Box5',
						type: 'Box',
						props: {},
						elements: [],
					},
				],
			},
		],
	},
]

Подумал, как получить такую модель?
Начальная идея была такой:

const getComponentById = id => components.find(item => item.id === id)

// Просто проходимся по связям и на основе связи добавляем компонент
const model = structure.map(item => {
	return {
		...getComponentById(item.id),
	}
})

Но, как же мне вложить их друг в друга, ведь связи по сути могут быть настолько глубоко. Подумал, наверное нужна рекурсия, но чёт не додумался как это применить.

Answer 1

[0xD34F]

function createTree(arr, structure) {
  const tree = Object.fromEntries(arr.map(n => [ n.id, { ...n } ]));
  const nonRootIds = structure.flatMap(n => n.children);

  structure.forEach(n => tree[n.id].elements = n.children.map(m => tree[m]));

  return Object.values(tree).filter(n => !nonRootIds.includes(n.id));
}

Comments

[Дима Паутов]

Большое спасибо, но пока ждал, решил поговорить с бекендерами как правильно хранить связи многие ко многим, в итоге получилось, что я немного не правильно хранил связи. Хранить их нужно не id детей, а id родителя, в которого вложен ребёнок.

От чего структура стала такой:

Новая структура

const structure = [
  {
    id: 1,
    parentId: null,
  },
  {
    id: 2,
    parentId: 1,
  },
  {
    id: 3,
    parentId: 2,
  },
  {
    id: 4,
    parentId: 3,
  },
  {
    id: 5,
    parentId: null,
  },
]

Не могли бы вы мне ещё раз помочь и немного изменить ваш ответ?

[0xD34F]

Дима Турков, изменить - нет. Вопрос мне кажется достаточно интересным, чтобы всё осталось как есть.

Можно дополнить:

function createTree(arr, structure) {
  const tree = Object.fromEntries(arr.map(n => [ n.id, { ...n, elements: [] } ]));

  structure
    .filter(n => n.parentId !== null)
    .forEach(n => tree[n.parentId].elements.push(tree[n.id]));

  return structure
    .filter(n => n.parentId === null)
    .map(n => tree[n.id]);
}

[Дима Паутов]

0xD34F, да, работает!!!!!!!!!!!!! Огромное вам спасибо!!! Какой раз вы спасаете мою бестолковую голову))))

Answer 2

[Alex]

function factory(arr) {
  return arr.map(context => {
    if (typeof context === 'number') {
      context = {
        id: context,
        children: []
      }
    }

    const component = getComponentById(context.id)
    component.elements = factory(context.children)

    return component
  })
}