平面数组重组为树形数组 [英] flat array restructure to a tree array

问题描述

我一直在尝试将以下平面数组(参与，请参见下文)重组为更有组织的树形，以便可以使用同步融合的树形网格组件.我尝试使用.reduce()函数.但似乎我无法做出正确的结构.我也尝试过用lodash按唯一ID对它们进行分组.无论如何，这是此平台中的某人帮助前进的:开始"阵列参与如下.一些属性的名称也需要重命名.

I have been trying to restructure the following flat array (participations, see below) to a more organized tree form, so that i can use Tree grid component of syncfusion. I have tried using the .reduce() function. but it seems i cannot make the correct strucutre. I have also tried lodash to group them by unique id. anyways here is what someone in this platform has helped to move forward: The Starting array participations is below. The names of some properties need to be renamed as well.

//what ive tried so far 
const custommodifier = (participations) => participations.reduce((a,{KlasCode, LESDatum, LESID, Moduleomschrijving,ParticipationLetterCode}) => {

    if (a[KlasCode] ){
      if (a[ParticipationLetterCode] ){
      a[KlasCode].subtasks[0].subtasks[0].subtasks.push({
          // ParticipationLetterCode,
          taskName: LESDatum,
          LESID,
        })
      } else {
        // a[KlasCode].subtasks[0].subtasks[0].taskName = ParticipationLetterCode
        a[KlasCode].subtasks[0].subtasks.push({
            taskName: ParticipationLetterCode,
            subtasks: [{
              taskName: LESDatum,
            }]
        })
      }
    } else {
      a[KlasCode] = {
        taskName: KlasCode,
        subtasks: [{
          taskName:Moduleomschrijving,
          subtasks: [{
            taskName: ParticipationLetterCode,
            subtasks: [{
              // ParticipationLetterCode,
              taskName: LESDatum,
              LESID,
            }]
          }]
        }]
      }
    }
    return a;
}, {});

在下面，您可以找到自定义函数应该使它看起来正确的数据结构.让任何人都看到这个

Below you can find the correct data structure a custom function should make it look. Thakns anyone seeing this

//starting point
let participations = [{
    KlasCode: "1S RD BJ GS ma-d",
    LESDatum: "12/12/20",
    LESID: "1",
    ModuleID: "1050",
    Moduleomschrijving:"Realisaties blouse/jurk",
    ParticipationLetterCode: "X"
  }, {
    KlasCode: "1S RD BJ GS ma-d",
    LESDatum: "11/11/20",
    LESID: "2",
    ModuleID: "1050",
    Moduleomschrijving:"Realisaties blouse/jurk",
    ParticipationLetterCode: "X",
  },
  {
    KlasCode: "1S RD BJ GS ma-d",
    LESDatum: "1/1/20",
    LESID: "3",
    ModuleID: "1050",
    Moduleomschrijving:"Realisaties blouse/jurk",
    ParticipationLetterCode: "Y"
  },
  {
    KlasCode: "2S RD BJ RR ma-d",
    LESDatum: "5/12/20",
    LESID: "4",
    ModuleID: "1051",
    Moduleomschrijving:"Realisaties shirts",
    ParticipationLetterCode: "Z"
  },
  {
    KlasCode: "2S RD BJ RR ma-d",
    LESDatum: "6/11/20,
    LESID: "4",
    ModuleID: "1051",
    Moduleomschrijving:"Realisaties shirts",
    ParticipationLetterCode: "Z"
  }
]

// Need to make the data look like this including field name change: 
let participations = [{
  "taskName": "1S RD BJ GS ma-d",
  "subtasks": [{
    "ModuleID": "1050",
    "taskName": "Realisaties blouse/jurk",
    "subtasks": [{
        "taskName": "X",
        "subtasks": [{
            "taskName": "12/12/20",
            "LESID": "1",
          },
          {
            "taskName": "11/11/20",
            "LESID": "2",
          }
        ],
      },
      {
        "taskName": "Y",
        "subtasks": [{
          "taskName": "1/1/20",
          "LESID": "3",
        }]
      }
    ]

  }]
},
{
  "taskName": "2S RD BJ RR ma-d",
  "subtasks": [{
    "ModuleID": "1051",
    "taskName": "Realisaties shirts",
    "subtasks": [{
        "taskName": "Z",
        "subtasks": [{
            "taskName": "5/12/20",
            "LESID":"4"
          },
          {
            "taskName": "6/11/20",
            "LESID":"5"
          }
        ],
      }
    ]
  }]
}]

推荐答案

我们已经检查了您的数组结构，为了将FlatArray转换为TreeGrid Arrary结构，必须定义Mapping Field以形成父子层次结构.因此，我们建议您使用定义Field(如在ParentId下给出的那样)来形成TreeGrid结构.

We have checked your Array Structure, In order to convert FlatArray to TreeGrid Arrary structure, it is necessary to define Mapping Field to form parent-child hierarchy. So we suggest you to use to define Field (as like given below ParentId) to form TreeGrid structure.

在TreeGrid组件中使用自引用数据绑定(平面数据)时，有必要为层次结构关系定义IdMapping和ParentIdMapping属性.
请参阅代码示例:-

While using Self-Referential Data binding (Flat Data )in TreeGrid component it is necessary to define the IdMapping and ParentIdMapping property for the hierarchy relations.
Refer to the code example:-

让treeGridObj:TreeGrid = new TreeGrid({dataSource:参与人数，idMapping:"LESID"，parentIdMapping:'ParentId'，allowPaging:正确，treeColumnIndex:1列: [{field:'LESID'，headerText:'Task ID'，width:90，textAlign:'Right'}，{栏位:"ParticipationLetterCode"，headerText:任务名称"，宽度:180}，...]});

let treeGridObj: TreeGrid = new TreeGrid({ dataSource: participations, idMapping: 'LESID', parentIdMapping: 'ParentId', allowPaging: true, treeColumnIndex: 1, columns: [ { field: 'LESID', headerText: 'Task ID', width: 90, textAlign: 'Right' }, { field: 'ParticipationLetterCode', headerText: 'Task Name', width: 180 }, . . . ] });

请参阅下面的TreeGrid DataSourceArray结构:-

Refer to the below TreeGrid DataSourceArray Structure:-

让参与人数= [{KlasCode:"1S RD BJ GS ma-d"，LESDatum:"12/12/20"，LESID:1模组ID:"1050"，Moduleomschrijving:"Realisaties女衬衫/毛衣"，ParticipationLetterCode:"X"，ParentId = null

let participations = [{ KlasCode: "1S RD BJ GS ma-d", LESDatum: "12/12/20", LESID: 1, ModuleID: "1050", Moduleomschrijving: "Realisaties blouse/jurk", ParticipationLetterCode: "X", ParentId = null

    }, { 
        KlasCode: "1S RD BJ GS ma-d", 
        LESDatum: "11/11/20", 
        LESID: 2, 
        ModuleID: "1050", 
        Moduleomschrijving: "Realisaties blouse/jurk", 
        ParticipationLetterCode: "X", 
        ParentId = 1                               //  Here ParentId(ParentIdMapping) value with 1 has been grouped under LESID(IdMapping) with Value 1 
    }, 
    { 
        KlasCode: "1S RD BJ GS ma-d", 
        LESDatum: "1/1/20", 
        LESID: 3, 
        ModuleID: "1050", 
        Moduleomschrijving: "Realisaties blouse/jurk", 
        ParticipationLetterCode: "Y", 
        ParentId = 1 
    }, 
    { 
        KlasCode: "2S RD BJ RR ma-d", 
        LESDatum: "5/12/20", 
        LESID: 4, 
        ModuleID: "1051", 
        Moduleomschrijving: "Realisaties shirts", 
        ParticipationLetterCode: "Z", 
        ParentId = null 
    }, 
    { 
        KlasCode: "2S RD BJ RR ma-d", 
        LESDatum: "6/11/20", 
        LESID: 5, 
        ModuleID: "1051", 
        Moduleomschrijving: "Realisaties shirts", 
        ParticipationLetterCode: "Z", 
        ParentId = 4 
    } 
    ] 

ID字段:此字段包含用于标识节点的唯一值.其名称已分配给idMapping属性.父ID字段:此字段包含指示父节点的值.其名称已分配给parentIdMapping属性.

ID Field: This field contains unique values used to identify nodes. Its name is assigned to the idMapping property. Parent ID Field: This field contains values that indicate parent nodes. Its name is assigned to the parentIdMapping property.

请参阅文档和演示链接:- https://ej2.syncfusion.com/demos/#/material/tree-grid/selfreference.html https://ej2.syncfusion.com/documentation/treegrid/data-binding/#self-referential-data-binding-flat-data

Refer to the documentation and Demo Link:- https://ej2.syncfusion.com/demos/#/material/tree-grid/selfreference.html https://ej2.syncfusion.com/documentation/treegrid/data-binding/#self-referential-data-binding-flat-data

如果您需要任何进一步的帮助，请与我们联系

Please get back to us if you need any further assistance

关于，Farveen sulthana T

Regards, Farveen sulthana T

这篇关于平面数组重组为树形数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！