CODEWITHSUNDEEP
htmlarraysangulartypescriptangular-material
MenimE
MenimE

Reputation: 304

TypeScript for loop in a nested Array

I am learning Angular and ran into this problem which I hope this community would help me with...I am posting for the first time. So, I have an array that looks something like : 

{moduleId : 1,moduleName: "module1",clauseObj: [{clauseId : 1, moduleId:1, clauseName : "clause1", clauseType : "sc",parentclause : 2 textArray : [{text : "text 1 clause"}]
}, {clauseId : 2 , moduleId : 1, clauseName : "clause2",clauseType : "C",textArray:[{
  text : "text 2clause"
}]}]}

The data is coming from the backend so the length of the Array keeps on changing. I am trying to make a list by displaying the data from the 'clauseObj'of individual Modules and if the clauseType is sc, it should be nested below the parent clause.

The .ts file is 

import { Component, OnInit } from '@angular/core';
import { AltserService } from './altser.service';

@Component({
  selector: 'app-alltest',
  templateUrl: './alltest.component.html',
  styleUrls: ['./alltest.component.css']
})
export class ALLTESTComponent implements OnInit {
  clauseArr = []

  testArray = [ ]
  constructor(private service : AltserService) { }

  ngOnInit() {
    this.getModules() 
  }

  getModules(){
    this.clauseArr =  this.service.getModules()
    console.log("Array", this.clauseArr)
  }

}

and I have created a service with data 

import { Injectable } from '@angular/core';
import { ModObj } from './altse-clasr';

@Injectable({
  providedIn: 'root'
})
export class AltserService {

  arrayM : ModObj[] = [
    {moduleId : 1,moduleName: "module1",clauseObj: [{
      clauseId : 1, moduleId:1, clauseName : "clause1", clauseType : "sc", textArray : 
      [{text : "text 1 clause"}]}, 

      {clauseId : 2 , moduleId : 1, clauseName : "clause2",clauseType : "C",textArray:[{
      text : "text 2clause"
    }]}]}, 


    {moduleId : 2,moduleName: "module1",clauseObj: [{
      clauseId : 1, moduleId:2, clauseName : "clause1M2", clauseType : "sc", textArray : 
      [{text : "text mod 2 1 clause"}]}, 
      {clauseId : 2 , moduleId : 2, clauseName : "clause2M2",clauseType : "C",textArray:[{
      text : "text mod2 2clause"
  }]}]}
  ]


  constructor() { }



  getModules(){
    return this.arrayM
  }

}

Can anyone help me with an idea on how to create Material Nested Tree. I have gone through the docs and It is confusing.

Upvotes: 0

Views: 259

Answers (2)

MoxxiManagarm
MoxxiManagarm

Reputation: 9134

You can try with lodash groupBy. (see stackblitz https://stackblitz.com/edit/angular-d2tuwd)

Component:

data = {
    moduleId : 1,
    moduleName: "module1",
    clauseObj: [
      {
        clauseId : 1,
        moduleId:1,
        clauseName : "clause1",
        clauseType : "sc",
        parentclause : 2,
        textArray : [
          { text : "text 1 clause" }
        ]
      },
      {
        clauseId : 2,
        moduleId : 1,
        clauseName : "clause2",
        clauseType : "C",
        textArray: [
          { text : "text 2clause" }
        ]
      }
    ]
  };

  groupedData = _groupBy(this.data.clauseObj, 'parentclause');

HTML:

<ul>
  <li *ngFor="let parent of groupedData[undefined]">
    {{ parent.clauseName }}
    <ul *ngIf="groupedData[parent.clauseId]">
      <li *ngFor="let child of groupedData[parent.clauseId]">
        {{ child.clauseName }}
      </li>
    </ul>
  </li>
</ul>

Upvotes: 1

ahmeticat
ahmeticat

Reputation: 1939

You could use flatMap

Update your getModules function on ALLTESTComponent 

getModules(){
    this.clauseArr =  this.service.getModules().flatMap(a=>a.clauseObj);
    console.log("Array", this.clauseArr)
  }

So you get this

[
   {"clauseId":1,"moduleId":1,"clauseName":"clause1","clauseType":"sc","textArray":[{"text":"text 1 clause"}]},
   {"clauseId":2,"moduleId":1,"clauseName":"clause2","clauseType":"C","textArray":[{"text":"text 2clause"}]},
   {"clauseId":1,"moduleId":2,"clauseName":"clause1M2","clauseType":"sc","textArray":[{"text":"text mod 2 1 clause"}]},
   {"clauseId":2,"moduleId":2,"clauseName":"clause2M2","clauseType":"C","textArray":[{"text":"text mod2 2clause"}]}
]

Upvotes: 1

Related Questions