javascript - 对嵌套数组 javascript 中的对象列表进行分组

Question

我有一个对象数组，如下所示

[
  {
      id: 10,
      regionName: "Europa",
      countryName: "Greece",
      applicationName: "Ramco",
      issueSummary: "No Reported Issues",
      resolutionEta: "",
      status: "UP"
  },
  {
      id: 9,
      regionName: "Asia PAC",
      countryName: "Singapore",
      applicationName: "Reckon",
      issueSummary: "No Reported Issues",
      resolutionEta: "",
      status: "UP"
  },
  {
      id: 7,
      regionName: "Asia PAC",
      countryName: "Thailand",
      applicationName: "Javelin",
      issueSummary: "No Reported Issues",
      resolutionEta: "",
      status: "UP"
  },
  {
      id: 8,
      regionName: "Europa",
      countryName: "Greece",
      applicationName: "Tamco",
      issueSummary: "No Reported Issues",
      resolutionEta: "",
      status: "UP"
  }
]

我正在尝试将这些对象分组到一组区域中，每个区域应该有一组国家，每个国家应该有一组应用程序。

{
  regions: [{
    regionName: "Europe",
    countries: [
      {
        countryName: "Greece",
        applications: [
          {
            applicationName: "Ramco",
            issueSummary: "No Reported Issues",
            eta: "",
            status: "UP",
          },
          {
            applicationName: "Tamco",
            issueSummary: "No Reported Issues",
            eta: "",
            status: "UP",
          }
        ]
      },
      {
        countryName: "France",
         applications: [
          {
            applicationName: "Ramco",
            issueSummary: "No Reported Issues",
            eta: "",
            status: "UP",
          },
          {
            applicationName: "Tamco",
            issueSummary: "No Reported Issues",
            eta: "",
            status: "UP",
          }
        ]
      },
    ]
.... and so on
  },

这是我目前所拥有的，它仅适用于区域数组。 我有一个 groupBy 方法，我将它用于地区和国家，但这给了我分离的数组，而不是嵌套的

 ngOnInit(): void {
    this.allRegions$ = this.dataService.getData();

    this.groupData();
  }

  groupData() {
    this.dataService.getData().subscribe(res => {
      this.data = res;
      const regions = this.groupBy('regions', this.data)
      const countries = this.groupBy('countries', regions)
    })
  }

  groupBy(key, array) {
    return array.reduce((all, current) => {
      const existingKey = all.find(existing => existing.key === current[key]);
      console.log(existingKey)
      if (!existingKey) {
        all.push({key: current[key], values: [current]});
      } else {
        existingKey.values.push(current);
      }
      return all;
    }, []);
  }

Answer 1

您可以通过使用对象作为对嵌套分组属性的引用并根据需要构建结构来采用抽象方法。

这种方法适用于任何深度的分组，只需将所需的键添加到 keys 数组即可。

const
    data = [{ id: 10, regionName: "Europa", countryName: "Greece", applicationName: "Ramco", issueSummary: "No Reported Issues", resolutionEta: "", status: "UP" }, { id: 9, regionName: "Asia PAC", countryName: "Singapore", applicationName: "Reckon", issueSummary: "No Reported Issues", resolutionEta: "", status: "UP" }, { id: 7, regionName: "Asia PAC", countryName: "Thailand", applicationName: "Javelin", issueSummary: "No Reported Issues", resolutionEta: "", status: "UP" }, { id: 8, regionName: "Europa", countryName: "Greece", applicationName: "Tamco", issueSummary: "No Reported Issues", resolutionEta: "", status: "UP" }],
    keys = ['regionName', 'countryName'],
    result = data
        .reduce((r, o) => {
            let key;
            keys
                .reduce((t, k) => {
                    ({ [k]: key, ...o } = o);
                    if (!t[key]) {
                        t[key] = { _: [] };
                        t._.push({ [k]: key, children: t[key]._ });
                    }
                    return t[key];
                }, r)
                ._
                .push(o);
            return r;
        }, { _: [] })
        ._;


console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }