ساخت آرایه ای از آبجکت ها برای لیست درختی

مسئله بسیار قشنگیه. بخشی از مسئله رو حل کردم و شما باید این کد رو توسعه بدین تا مسئله به طور کامل حل بشه.

import * as React from "react";
import "./App.css";
import _ from "lodash";

function App() {

let locationArr = [
 {aisle: 1, side: "A", bay: 1},
 {aisle: 1, side: "A", bay: 2},
 {aisle: 1, side: "A", bay: 3},
 {aisle: 1, side: "A", bay: 4},
 {aisle: 1, side: "A", bay: 5},
 {aisle: 2, side: "A", bay: 1},
 {aisle: 2, side: "A", bay: 2},
 {aisle: 2, side: "A", bay: 3},
 {aisle: 2, side: "A", bay: 4},
 {aisle: 2, side: "A", bay: 5},
 {aisle: 2, side: "B", bay: 1},
 {aisle: 2, side: "B", bay: 2},
 {aisle: 2, side: "B", bay: 3},
 {aisle: 2, side: "B", bay: 4},
 {aisle: 2, side: "B", bay: 5},
 {aisle: 3, side: "B", bay: 1},
 {aisle: 3, side: "B", bay: 2},
 {aisle: 3, side: "B", bay: 3},
 {aisle: 3, side: "B", bay: 4},
 {aisle: 3, side: "B", bay: 5}
]

///use lodash
const aisles = _.uniq(locationArr.map(item => item.aisle)); /// must returen [1,2,3,4]
console.log(aisles)
let newArrStep1 = aisles.map((aisle) => {
  console.log(aisle)
  let step1Obj = { aisle, children: [] };
  locationArr.reduce((accumulator, currentValue) => {
    if (currentValue.aisle === aisle) {
      step1Obj.children.push({
        side: currentValue.side,
        bay: currentValue.bay,
      });
    }
    return step1Obj
  }, step1Obj); 
return step1Obj}); 

console.log(newArrStep1)
return('covert arrey to tree structured')
}
export default App;

خیلی سپاس گزار خواهم بود که جواب نهایی رو همینجا به اشتراک بزارین.

نتیجه console.log(newArrStep۲) در کد بالا به شکل زیر هست:

[
  {
    "aisle": 1,
    "children": [
      {"side": "A", "bay": 1 },
      {"side": "A", "bay": 2 },
      {"side": "A", "bay": 3 },
      {"side": "A", "bay": 4 },
      {"side": "A", "bay": 5 }
    ]
  },
  {
    "aisle": 2,
    "children": [
      {"side": "A", "bay": 1 },
      {"side": "A", "bay": 2 },
      {"side": "A", "bay": 3 },
      {"side": "A", "bay": 4 },
      {"side": "A", "bay": 5 },
      {"side": "B", "bay": 1 },
      {"side": "B", "bay": 2 },
      {"side": "B", "bay": 3 },
      {"side": "B", "bay": 4 },
      {"side": "B", "bay": 5 }
    ]
  },
  {
    "aisle": 3,
    "children": [
      {"side": "B", "bay": 1 },
      {"side": "B", "bay": 2 },
      {"side": "B", "bay": 3 },
      {"side": "B", "bay": 4 },
      {"side": "B", "bay": 5 }
    ]
  }
]

این کد تکمیل شدهی کد قبله. تست شده و درست کرده.

import * as React from "react";
import _ from "lodash";

function App() {
  let locationArr = [
    { aisle: 1, side: "A", bay: 1 },
    { aisle: 1, side: "A", bay: 2 },
    { aisle: 1, side: "A", bay: 3 },
    { aisle: 1, side: "A", bay: 4 },
    { aisle: 1, side: "A", bay: 5 },
    { aisle: 2, side: "A", bay: 1 },
    { aisle: 2, side: "A", bay: 2 },
    { aisle: 2, side: "A", bay: 3 },
    { aisle: 2, side: "A", bay: 4 },
    { aisle: 2, side: "A", bay: 5 },
    { aisle: 2, side: "B", bay: 1 },
    { aisle: 2, side: "B", bay: 2 },
    { aisle: 2, side: "B", bay: 3 },
    { aisle: 2, side: "B", bay: 4 },
    { aisle: 2, side: "B", bay: 5 },
    { aisle: 3, side: "B", bay: 1 },
    { aisle: 3, side: "B", bay: 2 },
    { aisle: 3, side: "B", bay: 3 },
    { aisle: 3, side: "B", bay: 4 },
    { aisle: 3, side: "B", bay: 5 },
  ];

  ///use lodash
  const aisles = _.uniq(locationArr.map((item) => item.aisle)); /// must returen [1,2,3,4]
  console.log(aisles);
  let newArrStep1 = aisles.map((aisle) => {
    console.log(aisle);
    let step1Obj = { aisle, children: [] };
    locationArr.reduce((accumulator, currentValue) => {
      if (currentValue.aisle === aisle) {
        step1Obj.children.push({
          side: currentValue.side,
          bay: currentValue.bay,
        });
      }
      return step1Obj;
    }, step1Obj);
    return step1Obj;
  });

  console.log(newArrStep1);

  let newArrStep2 = newArrStep1.map((item) => {
      const sides = _.uniq(item.children.map((child) => child.side)); /// must returen [A] or [A, B]
      console.log(sides)
    let finalObj = sides.map((side) => {
      let step1Obj = { side, children: [] };
      item.children.reduce((accumulator, currentValue) => {
        if (currentValue.side === side) {
          step1Obj.children.push({
            bay: currentValue.bay,
          });
        }
        return step1Obj;
      }, step1Obj);
      return step1Obj;
    });
      return {aisle:item.aisle,children: finalObj}
  });

    console.log(newArrStep2)
  return "convert arrey to tree structured";
}
export default App;

نتیجه console.log(newArrStep2) در کد بالا به این شکله:

[
  {
    "aisle": 1,
    "children": [
      {
        "side": "A",
        "children": [
          { "bay": 1 },
          { "bay": 2 },
          { "bay": 3 },
          { "bay": 4 },
          { "bay": 5 }
        ]
      }
    ]
  },
  {
    "aisle": 2,
    "children": [
      {
        "side": "A",
        "children": [
          { "bay": 1 },
          { "bay": 2 },
          { "bay": 3 },
          { "bay": 4 },
          { "bay": 5 }
        ]
      },
      {
        "side": "B",
        "children": [
          { "bay": 1 },
          { "bay": 2 },
          { "bay": 3 },
          { "bay": 4 },
          { "bay": 5 }
        ]
      }
    ]
  },
  {
    "aisle": 3,
    "children": [
      {
        "side": "B",
        "children": [
          { "bay": 1 },
          { "bay": 2 },
          { "bay": 3 },
          { "bay": 4 },
          { "bay": 5 }
        ]
      }
    ]
  }
]

ممنونم از کمکتون. کاملا درست با کدی که گفتین درست کار میکنه
@kamran.davar