Angular 2+ - Tree table using API

Question

I have three Apis for categories,subcategories and policies.

For eg:

"https://restapi.com/project".

1.Category

In the case of category, I have to pass the body(raw data) as above json for the above Api

      {
        "startIndex":"1",
        "count":"150",
        "groupBy":"category",
        "searchTerm":"PROJECT:project1"
        }

Api Response: Listed out all categories

{ "data":
  [
   {
    projectName:null,
    categoryName: category1,
    subCategoryName:null,
    controlName:null
   },
   {
    projectName:null,
    categoryName: category2,
    subCategoryName:null,
    controlName:null
   }
  so on....
  ]
}

2.subCategory

In the case of sub-category, I have to pass the body(raw data) as above json for the above Api

      {
        "startIndex":"1",
        "count":"150",
        "groupBy":"subcategory",
        "searchTerm":"PROJECT:projectName1,CATEGORY: category1"
        }

Api Response: Listed out all subcategory of category1(because we give searchTerm by categoryName)

{ "data":
  [
   {
    projectName:null,
    categoryName: null,
    subCategoryName: subcategory1,
    controlName:null
   },
   {
    projectName:null,
    categoryName: null,
    subCategoryName: subcategory2,
    controlName:null
   }
  so on....
  ]
}

2.Control

In the case of control, I have to pass the body(raw data) as above json for the above Api

      {
        "startIndex":"1",
        "count":"150",
        "groupBy":"subcategory",
        "searchTerm":"PROJECT:projectName1,SUB-CATEGORY: subcategory1"
        }

Api Response: Listed out all Control of subcategory1(because we give searchTerm by subcategoryname)

{ "data":
  [
   {
    projectName:null,
    categoryName: null,
    subCategoryName: null,
    controlName: control1
   },
   {
    projectName:null,
    categoryName: null,
    subCategoryName: null,
    controlName: control2
   }
  so on....
  ]
}

When I open the 1st policy and after that, I open the next one. But the categories of second policy is automatically updated in first policy.

For calling these Apis, I used three get method for getCategory(),getSubcategory(),getControl().

I am attaching stackblitz example..

In stackBlitz I used three methods(like the method which I used)

ie,

open(i)====> I take index,i value for taking the policy values(but in my Api, I have to sent categoryName to get subcategory)

subOpen(i)====> I take index,j value for taking the subCategory values(but in my Api, I have to sent subCategory to get controls)

Here, https://stackblitz.com/edit/angular-9q4fbn?file=src%2Fapp%2Fapp.component.html.

Can you please tell me how to solve this??

Answer 1

Your data is already structured in a way that makes sense for binding it to your view. There's no need to micromanage references to parts of your data tree.

The logical issue you were having is that even though you were looping over categories in your tree, you were binding to the same reference of subCategories. Updating the reference to dropdownData1 or dropdownData2 changes the display for all categories.

It's actually much simpler to do what you want. Just use your existing data structure as it is.

https://stackblitz.com/edit/angular-dpziva

Here's the new view:

<ng-container *ngFor='let policy of dropdownData'>
  <tr>
    <td (click)="policy.expand = !policy.expand">
      <span class="{{policy.expand ?'fa fa-angle-down':'fa fa-angle-right'}}"></span>
      <span>{{policy.name}}</span>
    </td>
    <td class="text-center">
      <span class="label success">{{policy.policyName}}</span>
    </td>
  </tr>
  <ng-container *ngIf="policy.expand && policy.categories && policy.categories.length">
    <ng-container *ngFor='let category of policy.categories'>
      <tr>
        <td (click)="category.expand = !category.expand">
          <span style="margin-left: 20px;" class="{{category.expand ?'fa fa-angle-down':'fa fa-angle-right'}}"></span>
          <span>{{category.name}}</span>
        </td>
        <td class="text-center">
          <span class="label success">{{category.categoryName}}</span>
        </td>
      </tr>
      <ng-container *ngIf="category.expand && category.subCategories && category.subCategories.length">
        <ng-container *ngFor='let subcategory of category.subCategories'>
          <tr>
            <td (click)="subcategory.expand = !subcategory.expand">
              <span style="margin-left: 40px;" class="{{subcategory.expand ?'fa fa-angle-down':'fa fa-angle-right'}"></span>
              <span>{{subcategory.name}}</span>
            </td>
            <td class="text-center">
              <span class="label success">{{subcategory.subCategoryName}}</span>
            </td>
          </tr>
        </ng-container>
      </ng-container>
    </ng-container>
  </ng-container>
</ng-container>

Here's the new component class:

export class AppComponent {
  name = "Angular";
  dropdownData: any;

  data = {
    policy: [
      {
        policyName: "a1",
        name: "policy 1.1",
        expand: false,
        categories: [
          {
            categoryName: "c1",
            name: "category 1.1",
            expand: false,
            subCategories: [
              {
                subCategoryName: "s1",
                name: "subCategory 1.1"
              },
              {
                subCategoryName: "s2",
                name: "subCategory 1.2"
              }
            ]
          },
          {
            categoryName: "c2",
            name: "category 1.2",
            expand: false,
            subCategories: [
              {
                subCategoryName: "s5",
                name: "subCategory 2.1"
              },
              {
                subCategoryName: "s6",
                name: "subCategory 2.2"
              }
            ]
          }
        ]
      },
      {
        policyName: "a2",
        name: "policy 1.2",
        expand: false,
        categories: [
          {
            categoryName: "c4",
            name: "category 1.1",
            expand: false,
            subCategories: [
              {
                subCategoryName: "s13",
                name: "subCategory 1.1"
              }
            ]
          },
          {
            categoryName: "c5",
            name: "category 1.2",
            expand: false,
            subCategories: [
              {
                subCategoryName: "s17",
                name: "subCategory 2.1"
              },
              {
                subCategoryName: "s18",
                name: "subCategory 2.2"
              }
            ]
          },
          {
            categoryName: "c6",
            name: "category 1.3",
            expand: false,
            subCategories: [
              {
                subCategoryName: "s21",
                name: "subCategory 3.1"
              }
            ]
          }
        ]
      }
    ]
  };

  ngOnInit() {
    this.dropdownData = this.data.policy;
    console.log("dataas", this.dropdownData);
  }

  expand(collection, expandedItem) {
    collection.forEach(item => item.expand = item.id === expandedItem.id);
  }
}