如果没有子元素，则从列表中动态删除项目

Question

我有 3 个数组列表，如下所示：

 groups = [ { grpId: 1, grpName: "Vegetables" }, { grpId: 2, grpName: "Fruits" }, { grpId: 3, grpName: "Staples" }];
 subGrp = [ { subGrpId: "V1", grpId: 1, subGrpName: "Carrot" }, { subGrpId: "F1", grpId: 2, subGrpName: "Apple" },
            { subGrpId: "S1", grpId: 3, subGrpName: "Dal" }];
 quantity = [ { quantityValue: "1kg", subGrpId: "V1" }, { quantityValue: "1kg", subGrpId: "S1" }];

条件：如果没有任何与“subGrp”数组相关的“数量”，那么我们需要从自定义列表中删除整个条目。

使用上面的数组列表，我正在尝试构建一个自定义列表，如下所示：

const grpSet = new Set(this.groups.map(i => ({ id: i.grpId, name: i.grpName }))); 
grpSet.forEach(g =>
  this.groceryList.push({
    grp: g["name"],
    grpTypeList: this.subGrp.filter(el => {
      if (el.grpId === g["id"] && this.quantity) {
        el["quantities"] = this.quantity.filter(
          v => v.subGrpId === el["subGrpId"]
        );
        if (el["quantities"].length > 0) {
          return el;
        }
      }
    })
  })
);

// above logic will lead us to below custom list. 

从此，我需要删除 Fruits 条目，因为 grpTypeList 是空的。 但我的逻辑不允许我这样做。

[{
    "grp": "Vegetables",
    "grpTypeList": [{
        "subGrpId": "V1",
        "grpId": 1,
        "subGrpName": "Carrot",
        "quantities": [{
                "quantityValue": "1kg",
                "subGrpId": "V1"
            },
            {
                "quantityValue": "2kg",
                "subGrpId": "V1"
            }
        ]
    }]
},
// remove this complete object as grpTypeList is empty
{
    "grp": "Fruits",
    "grpTypeList": [

    ]
}, 
{
    "grp": "Staples",
    "grpTypeList": [{
        "subGrpId": "S1",
        "grpId": 3,
        "subGrpName": "Dal",
        "quantities": [{
            "quantityValue": "1kg",
            "subGrpId": "S1"
        }]
    }]
} ]

使用上面的列表，我正在绘制我的 html 以显示如下图：

Answer 1

您需要注意一些细微的更改，请使用以下几行更新您的代码：

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  groceryList = [];
  groups = [
    { grpId: 1, grpName: "Vegetables" },
    { grpId: 2, grpName: "Fruits" },
    { grpId: 3, grpName: "Staples" }
  ];
  subGrp = [
    { subGrpId: "V1", grpId: 1, subGrpName: "Carrot" },
    { subGrpId: "F1", grpId: 2, subGrpName: "Apple" },
    { subGrpId: "S1", grpId: 3, subGrpName: "Dal" }
  ];
  quantity = [
    { quantityValue: "1kg", subGrpId: "V1" },
    { quantityValue: "2kg", subGrpId: "V1" },
    { quantityValue: "1kg", subGrpId: "S1" }
  ];

  ngOnInit() {
    this.groceryList = [];
    const grpSet = new Set(
      this.groups.map(i => ({ id: i.grpId, name: i.grpName }))
    );

    grpSet.forEach(g =>{
      let element:any[];
      element= this.subGrp.filter(el => {
          if (el.grpId === g["id"] && this.quantity) {
            el["quantities"] = this.quantity.filter(
              v => v.subGrpId === el["subGrpId"]
            );
            if (el["quantities"].length > 0) {
              return el;
            }
          }
        })
        if(element && element.length){
        this.groceryList.push({
          grp:g["name"],
          grpTypeList:element
        })
        }
    }
    );
    console.log(JSON.stringify(this.groceryList));
  }
}