將嵌套陣列中的物件串列分組javascript

我有一個物件陣列如下

[
  {
      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;
    }, []);
  }

uj5u.com熱心網友回復：

您可以通過使用物件作為對嵌套分組屬性的參考來采用抽象方法，并根據需要構建結構。

這種方法只需將所需的鍵添加到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; }

標籤：javascript json 有角的

上一篇：json.decoder.JSONDecodeError：期望值：來自本地檔案的第1行第1列（字符0）

下一篇：Json架構驗證失敗，WSO2APIM中出現錯誤