Home > front end >  Create a level for each object in the flatenned tree
Create a level for each object in the flatenned tree

Time:11-30

I want to implement a Angular material flat tree. I am new to reduce function and closure understanding the below method is also difficult for me. Can it be simplified I am using the below code to flatten a recursive tree. My tree look as below and I can rewrite the flattened code with level included. How do I incorporate level here. How can this be achieved, Please help.

[ {
      "sectionIdent": "0/0",
      "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
      "sectionTitle": "Timed exam section 1",
      "sectionOrder": null,
      "randomCount": null,
      "mixContent": null,
      "totalCount": 0,
      "titleError": false,
      "randomError": false,
      "items": null,
      "delNavInfo": null,
      "subExamSections": [{
        "sectionIdent": "0/0/0",
        "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
        "sectionTitle": "Timed exam section 2",
        "sectionOrder": null,
        "randomCount": null,
        "mixContent": null,
        "totalCount": 0,
        "titleError": false,
        "randomError": false,
        "items": null,
        "delNavInfo": null,
        "subExamSections": [],
        "mainSection": true
    },
    {
      "sectionIdent": "0/0/1",
      "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
      "sectionTitle": "Timed exam section 3",
      "sectionOrder": null,
      "randomCount": null,
      "mixContent": null,
      "totalCount": 0,
      "titleError": false,
      "randomError": false,
      "items": null,
      "delNavInfo": null,
      "subExamSections": [{
        "sectionIdent": "0/0/1/0",
        "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
        "sectionTitle": "Timed exam section 4",
        "sectionOrder": null,
        "randomCount": null,
        "mixContent": null,
        "totalCount": 0,
        "titleError": false,
        "randomError": false,
        "items": null,
        "delNavInfo": null,
        "subExamSections": null,
        "mainSection": true
    }
  
    ],
      "mainSection": true
  }
    ],
      "mainSection": true
  }
];

I want it in the format like this

[{
   ...sectionTitle:"Timed exam section 1",
   level:0
  },
 {
   ...sectionTitle:"Timed exam section 2",
   level:1
  },
{
   ...sectionTitle:"Timed exam section 3",
   level:1
  },
{
   ...sectionTitle:"Timed exam section 4",
   level:2
  },
]

Code:

  buildFileTree(nodeArray: any, level: number): ExamSection[] {
    return nodeArray.reduce(function recur(accumulator, curr) {
      var keys = Object.keys(curr);
      keys.splice(keys.indexOf('subExamSections'), 1);
   
      accumulator.push(keys.reduce(function (entry, key) {
          entry[key] = curr[key];
          return entry;
      }, {}));
   
      if (curr.subExamSections && curr.subExamSections.length) {
          return accumulator.concat(curr.subExamSections.reduce(recur, []));
      }
   
      return accumulator;
   }, []);
  }

CodePudding user response:

You can get the structure you are looking for with this:

function buildFileTree(tree = [], level = 0) {
  return Array.prototype.concat
    .apply(
      tree.map(item => ({ ...item, level })), // Add 'level' property
      tree.map(item => {
        const subtree = item.subExamSections || []
        const nextLevel = level   1
        return buildFileTree(subtree, nextLevel) // Combine with sub-tree recursively
      })
    )
    .map(({ sectionTitle, level }) => ({ sectionTitle, level })) // Extract the desired properties
}

CodePudding user response:

Concetp used : ... Destructuring to add and remove properties, Recussiong: for looping, map to create new array, foreach to iteration.

   let loop = (sections = [], flatSection = []) => {
        if(sections) {
        let editedShallowCopy  = sections.map((s, i) => {
            let { subExamSections , ...rest } = s;  // destructure to remove property
            return { ...rest, level: flatSection.length   i   1 } // adding the new property
        }); 
    
        flatSection.push(...editedShallowCopy); // adding it flatSection
        sections?.forEach(section => loop(section.subExamSections, flatSection)); // go in deeper levels of tree, Recussiong loop
        } 
    
        return flatSection;
    }

 console.log(loop(tree))

let tree = [{
  "sectionIdent": "0/0",
  "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
  "sectionTitle": "Timed exam section 1",
  "sectionOrder": null,
  "randomCount": null,
  "mixContent": null,
  "totalCount": 0,
  "titleError": false,
  "randomError": false,
  "items": null,
  "delNavInfo": null,
  "subExamSections": [{
      "sectionIdent": "0/0/0",
      "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
      "sectionTitle": "Timed exam section 2",
      "sectionOrder": null,
      "randomCount": null,
      "mixContent": null,
      "totalCount": 0,
      "titleError": false,
      "randomError": false,
      "items": null,
      "delNavInfo": null,
      "subExamSections": [],
      "mainSection": true
    },
    {
      "sectionIdent": "0/0/1",
      "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
      "sectionTitle": "Timed exam section 3",
      "sectionOrder": null,
      "randomCount": null,
      "mixContent": null,
      "totalCount": 0,
      "titleError": false,
      "randomError": false,
      "items": null,
      "delNavInfo": null,
      "subExamSections": [{
          "sectionIdent": "0/0/1/0",
          "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
          "sectionTitle": "Timed exam section 4",
          "sectionOrder": null,
          "randomCount": null,
          "mixContent": null,
          "totalCount": 0,
          "titleError": false,
          "randomError": false,
          "items": null,
          "delNavInfo": null,
          "subExamSections": null,
          "mainSection": true
        }

      ],
      "mainSection": true
    }
  ],
  "mainSection": true
}];


let loop = (sections = [], flatSection = []) => {
  if (sections) {
    let editedShallowCopy = sections.map((s, i) => {
      let {
        subExamSections,
        ...rest
      } = s; // destructure to remove property
      return { ...rest,
        level: flatSection.length   i   1
      } // adding the new property
    });

    flatSection.push(...editedShallowCopy); // adding it flatSection
    sections.forEach(section => loop(section.subExamSections, flatSection)); // go in deeper levels of tree
  }

  return flatSection;
}

console.log(loop(tree))
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related