Как выполнить несколько вложенных групповых групп Lodash в древовидной структуре?

#javascript #arrays #multidimensional-array #lodash

Вопрос:

Допустим, у меня есть такая структура данных.

 child: [  {  typeOfPackage: 'subSub',  parents: '/Test123/Diet/',  itemName: '250 ML',  pricePerItem: 150,  quantity: 0,  quantityType: '123',  description: '5',  avgTimeTaken: 0,  images: [],  isEnabled: true,  inventory: [],  equipment: [],  _id: 617f9efdf0347931684888fd  },  {  typeOfPackage: 'sub',  parents: '/Test123/',  itemName: 'Regular',  pricePerItem: 0,  quantity: 0,  quantityType: '1',  description: '1',  avgTimeTaken: 1,  images: [],  isEnabled: true,  inventory: [],  equipment: [],  _id: 617f9efdf0347931684888fe  },  {  typeOfPackage: 'subSub',  parents: '/Test123/Reg3/',  itemName: '500ML',  pricePerItem: 123,  quantity: 0,  quantityType: '12',  description: '123',  avgTimeTaken: 51,  images: [],  isEnabled: true,  inventory: [],  equipment: [],  _id: 617f9efdf0347931684888ff  }  ]  

Я намерен преобразовать эти данные, разделив родителей. И мой предполагаемый результат выглядит следующим образом:

 child: [ {  itemName: 'Test123',  subPackages: [  {  itemName: 'Diet',  subSubPackages: [{  typeOfPackage: 'subSub',  parents: '/Test123/Diet/',  itemName: '250 ML',  pricePerItem: 150,  quantity: 0,  quantityType: '123',  description: '5',  avgTimeTaken: 0,  images: [],  isEnabled: true,  inventory: [],  equipment: [],  }]  },  {  itemName: 'Regular',  typeOfPackage: 'sub',  parents: '/Test123/',  pricePerItem: 0,  quantity: 0,  quantityType: '1',  description: '1',  avgTimeTaken: 1,  images: [],  isEnabled: true,  inventory: [],  equipment: [],  subSubPackages: [],  },  {  itemName: 'Reg3',  subSubPackages: [  {  typeOfPackage: 'subSub',  parents: '/Test123/Reg3/',  itemName: '500ML',  pricePerItem: 123,  quantity: 0,  quantityType: '12',  description: '123',  avgTimeTaken: 51,  images: [],  isEnabled: true,  inventory: [],  equipment: [],  _id: 617f9efdf0347931684888ff  }  ]  },  ] } ]  

Я попытался использовать цепочку lodash и groupBy, но смог сгруппировать ее только по первому имени элемента (Test123). Я не мог понять, как сделать дальнейшую группировку внутри этого, не используя пользовательские методы цикла и карты, и это тоже меня смутило.

Ответ №1:

Вы можете разделить parents и построить вложенную структуру.

Этот подход использует теневой объект для более быстрого доступа к одноименным родителям и возвращает только полезную нагрузку без организационной структуры.

Если вы хотите использовать subPackages или subSubPackages , вы можете использовать функцию для генерации этого ключа вместе с уровнем вложенности actuyl. Для последующей обработки данных я рекомендую использовать только общие имена, как children для каждого уровня.

 const  getSub = level =gt; `sub${'Sub'.repeat(level)}Level`,  data = [{ typeOfPackage: 'subSub', parents: '/Test123/Diet/', itemName: '250 ML', pricePerItem: 150, quantity: 0, quantityType: '123', description: '5', avgTimeTaken: 0, images: [], isEnabled: true, inventory: [], equipment: [], _id: '617f9efdf0347931684888fd' }, { typeOfPackage: 'sub', parents: '/Test123/', itemName: 'Regular', pricePerItem: 0, quantity: 0, quantityType: '1', description: '1', avgTimeTaken: 1, images: [], isEnabled: true, inventory: [], equipment: [], _id: '617f9efdf0347931684888fe' }, { typeOfPackage: 'subSub', parents: '/Test123/Reg3/', itemName: '500ML', pricePerItem: 123, quantity: 0, quantityType: '12', description: '123', avgTimeTaken: 51, images: [], isEnabled: true, inventory: [], equipment: [], _id: '617f9efdf0347931684888ff' }],  result = data  .reduce((r, o) =gt; {  o  .parents  .split('/')  .filter(Boolean)  .reduce((t, itemName, i) =gt; {   if (!t[itemName]) {  t[itemName] = { _: [] };  t._.push({ itemName, [getSub(i)]: t[itemName]._ });  }  return t[itemName];  }, r)  ._  .push(o);  return r;  }, { _: [] })  ._;  console.log(result); 
 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Комментарии:

1. Эй. Спасибо! Я уже застрял в этой структуре с моей формой создания новой, так что это для редактирования, так как я сохраняю значения в БД, как это, поэтому, чтобы перейти к форме редактирования, мне нужно преобразовать ее обратно для целей интерфейса. Первоначально я использовал цепочку lodash =gt; затем групповую карту, но я столкнулся с проблемой, а затем продолжал чесать голову. Если я хочу заменить дочерние элементы на подчиненные и подчиненные, как я узнаю, на сколько уровней глубже я нахожусь в этой функции генерации ключей?

2. Огромное спасибо. Это полностью решает мою проблему, я думаю, я не понимаю использования второго сокращения в нем, так что не могли бы вы пролить некоторый свет на это? Я понятия не имею, как вы придумали это решение, оно чистое и гениальное 😀

3. второй reduce принимает разделенное parents свойство для вложенности.

4. А, понятно. Фильтр, я думаю, предназначен только для проверки на нуль. У вас есть какие-нибудь советы о том, как вы стали лучше использовать такие чистые решения с помощью reduce и тому подобного? Я бы с удовольствием поиграл и научился.