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

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));  }}