Data lists mapping (TreeSelect)-CodePudding

I'm working on an angular project, where I want to convert a list to a specific data structure, to be able to use it with the TreeSelect component of primeng.

from:

  initialDataStructure = [
    { "country": "GERMANY", "productType": "BASE", "deliveryPeriod": "MONTH"},
    { "country": "GERMANY", "productType": "BASE", "deliveryPeriod": "YEAR"},
    { "country": "GERMANY", "productType": "PEAK", "deliveryPeriod": "MONTH"},
    { "country": "GERMANY", "productType": "PEAK", "deliveryPeriod": "YEAR"},
    
    { "country": "AUSTRIA", "productType": "BASE", "deliveryPeriod": "MONTH"},
    { "country": "AUSTRIA", "productType": "BASE", "deliveryPeriod": "YEAR"},
    { "country": "AUSTRIA", "productType": "PEAK", "deliveryPeriod": "MONTH"},
    { "country": "AUSTRIA", "productType": "PEAK", "deliveryPeriod": "YEAR"},
    ]

I tried this, but it didn't work as expected. is there any other way to get this mapped? I tried this, but it didn't work as expected. is there any other way to get this mapped?


          for (var i = 0, len = this.listContracts.length, p; i < len; i  ) { // faster than .forEach

            p = this.listContracts[i];

            if (this.grouped[p.country] === undefined) // twice faster then hasOwnProperty
              this.grouped[p.country] ={}

            if (this.grouped[p.country][p.productType] === undefined)
              this.grouped[p.country][p.productType] ={}

            if (this.grouped[p.country][p.productType][p.deliveryPeriod] === undefined)
              this.grouped[p.country][p.productType][p.deliveryPeriod]=[]

            this.grouped[p.country][p.productType][p.deliveryPeriod].push(p); //  groupby is HERE xD

          }

expectedDataStructure =  [
    {
      label: "GERMANY",
      children: [
        {
          label: "BASE",
          children:
            [
              {
                label: "MONTH",
                children: [{ "country": "GERMANY", "productType": "BASE", "deliveryPeriod": "MONTH"}]
              },
              {
                label: "YEAR",
                children: [{ "country": "GERMANY", "productType": "BASE", "deliveryPeriod": "YEAR"}]
              }
            ]
        },
        {
          label: "PEAK",
          children:
            [
              {
                label: "MONTH",
                children: [{ "country": "GERMANY", "productType": "PEAK", "deliveryPeriod": "MONTH"}]
              },
              {
                label: "YEAR",
                children: [{ "country": "GERMANY", "productType": "PEAK", "deliveryPeriod": "YEAR"}]
              }
            ]
        },
      ]
    },
    {
      label: "AUSTRIA",
      children: [
        {
          label: "BASE",
          children:
            [
              {
                label: "MONTH",
                children: [{ "country": "AUSTRIA", "productType": "BASE", "deliveryPeriod": "MONTH"}]
              },
              {
                label: "YEAR",
                children: [{ "country": "AUSTRIA", "productType": "BASE", "deliveryPeriod": "YEAR"}]
              }
            ]
        },
        {
          label: "PEAK",
          children:
            [
              {
                label: "MONTH",
                children: [{ "country": "AUSTRIA", "productType": "PEAK", "deliveryPeriod": "MONTH"}]
              },
              {
                label: "YEAR",
                children: [{ "country": "AUSTRIA", "productType": "PEAK", "deliveryPeriod": "YEAR"}]
              }
            ]
        },
      ]
    },
  ]

CodePudding user response：

const initialDs = [
  { country: 'GERMANY', productType: 'BASE', deliveryPeriod: 'MONTH' },
  { country: 'GERMANY', productType: 'BASE', deliveryPeriod: 'YEAR' },
  { country: 'GERMANY', productType: 'PEAK', deliveryPeriod: 'MONTH' },
  { country: 'GERMANY', productType: 'PEAK', deliveryPeriod: 'YEAR' },

  { country: 'AUSTRIA', productType: 'BASE', deliveryPeriod: 'MONTH' },
  { country: 'AUSTRIA', productType: 'BASE', deliveryPeriod: 'YEAR' },
  { country: 'AUSTRIA', productType: 'PEAK', deliveryPeriod: 'MONTH' },
  { country: 'AUSTRIA', productType: 'PEAK', deliveryPeriod: 'YEAR' },
];

const DataStucture = (array, Type) => {
  const res = array
    .filter(x => x.productType === Type)
    .map(x => {
      const obj = {
        label: x.country,
        chilren: [
          {
            label: x.deliveryPeriod,
            children: [x],
          },
        ],
      };
      return obj;
    });
  return res;
};

console.log(DataStucture(initialDs, 'PEAK'));

CodePudding user response：

RxJS

custom recursive operators
groupBy

https://stackblitz.com/edit/rxjs-w8j55z?file=index.ts

const { map, from, pipe, identity, groupBy, mergeMap, toArray } = rxjs;

const initialDataStructure = [
  { country: 'GERMANY', productType: 'BASE', deliveryPeriod: 'MONTH' },
  { country: 'GERMANY', productType: 'BASE', deliveryPeriod: 'YEAR' },
  { country: 'GERMANY', productType: 'PEAK', deliveryPeriod: 'MONTH' },
  { country: 'GERMANY', productType: 'PEAK', deliveryPeriod: 'YEAR' },
  { country: 'AUSTRIA', productType: 'BASE', deliveryPeriod: 'MONTH' },
  { country: 'AUSTRIA', productType: 'BASE', deliveryPeriod: 'YEAR' },
  { country: 'AUSTRIA', productType: 'PEAK', deliveryPeriod: 'MONTH' },
  { country: 'AUSTRIA', productType: 'PEAK', deliveryPeriod: 'YEAR' },
];

const treeSelect = (...keys) => {
  const key = keys.shift();
  return !key ? identity : pipe(
    groupBy((data) => data[key]),
    mergeMap((c$) => c$.pipe(
      treeSelect(...keys),
      map((arr) => ({label: c$.key, children: arr}))),
    ),
    toArray());
};

from(initialDataStructure).pipe(
  treeSelect('country', 'productType', 'deliveryPeriod')
).subscribe(console.log);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.5.6/rxjs.umd.min.js"></script>