#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 и тому подобного? Я бы с удовольствием поиграл и научился.