JavaScript嵌套数组对象分组：Angular中实现区域-国家-应用层级嵌套分组的问题

Got it, let's get your nested grouping working properly! Your current groupBy function only handles single-level grouping, so we need to adjust the approach to build the nested structure in one pass (or with chained grouping that actually nests the data).

Here's a complete, working implementation tailored to your desired output: #

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

groupData() {
  this.dataService.getData().subscribe(res => {
    this.data = res;
    
    // Build the nested region -> country -> application structure
    const nestedRegions = res.reduce((acc, currentItem) => {
      // Step 1: Find or create the region
      let region = acc.find(r => r.regionName === currentItem.regionName);
      if (!region) {
        region = {
          regionName: currentItem.regionName,
          countries: []
        };
        acc.push(region);
      }

      // Step 2: Find or create the country within the region
      let country = region.countries.find(c => c.countryName === currentItem.countryName);
      if (!country) {
        country = {
          countryName: currentItem.countryName,
          applications: []
        };
        region.countries.push(country);
      }

      // Step 3: Format the application data and add to the country
      const application = {
        applicationName: currentItem.applicationName,
        issueSummary: currentItem.issueSummary,
        eta: currentItem.resolutionEta, // Map resolutionEta to eta as per your example
        status: currentItem.status
      };
      country.applications.push(application);

      return acc;
    }, [] as { regionName: string; countries: { countryName: string; applications: any[] }[] }[]);

    // Wrap in the final structure matching your example
    this.nestedData = { regions: nestedRegions };
    console.log(this.nestedData); // You'll see the correct nested structure here
  });
}

How this works: #

• We use Array.reduce() to iterate through your flat data array once, which is efficient (no multiple passes over the data).
• For each item, we first check if its region already exists in our accumulator array. If not, we create a new region object and add it.
• Next, we check if the country exists within that region's countries array. Again, create and add it if missing.
• Finally, we format the application data (mapping resolutionEta to eta to match your desired output) and push it into the country's applications array.

Why your original approach didn't work: #

Your groupBy function returns a structure like [{ key: 'Europa', values: [...] }], which doesn't carry over the nested context needed to build the country -> application hierarchy. By handling all levels in a single reduce operation, we maintain that context and build the exact nested structure you need.

内容的提问来源于stack exchange，提问作者user2004