对嵌套的 json 响应进行分组和计数 - Angular

Question

我正在尝试绑定 Angular Material table 中的值，在此之前我需要处理 GET 响应 v

努力实现如下（仅供理解）

我的错误代码

let filterByLocation = data.reduce((r, { group: location.country, ...object }) => {
    var finalArry = r.find(o => o.location === location);
    if (!finalArry) r.push(temp = { location, locationObj: [] });
    finalArry.locationObj.push(object);
    return r;
}, []);

console.log(filterByLocation);

感谢@Nishant Dixit 的工作片段

const finalResponse = data.response.reduce((r, {
  location: {
    country: group
  },
  ...object
}) => {
  r[group] = r[group] || {
    location: group,
    locationObj: []
  };
  r[group].locationObj.push(object);
  return r;
}, {});

console.log(finalResponse)



const data = {
  "totalRec": 5,
  "response": [
  {
      "employee": {
        "uid": 1,
        "empName": "Jade"
      },
      "location": {
        "country": "UK",
        "subLocation": "London"
      },
      "department": {
        "sector": "IT"
      }
    },
    {
      "employee": {
        "uid": 2,
        "empName": "Mike"
      },
      "location": {
        "country": "UK",
        "subLocation": "Manchester"
      },
      "department": {
        "sector": "IT"
      }
    },
    {
      "employee": {
        "uid": 3,
        "empName": "Liya"
      },
      "location": {
        "country": "UK",
        "subLocation": "Southampton"
      },
      "department": {
        "sector": "HR"
      }
    },
    {
      "employee": {
        "uid": 3,
        "empName": "Brad"
      },
      "location": {
        "country": "USA",
        "subLocation": "Texas"
      },
      "department": {
        "sector": "IT"
      }
    },
    {
      "employee": {
        "uid": 3,
        "empName": "Brad"
      },
      "location": {
        "country": "USA",
        "subLocation": "Texas"
      },
      "department": {
        "sector": "NON-IT"
      }
    }
  ]
};

但问题是我得到的结果像

UK : {
location : "UK"
....
}

在html中，我不想像下面这样用点运算明确提到UK，而是row.location

<ng-container matColumnDef="facility">
<mat-header-cell *matHeaderCellDef mat-sort-header> Facility</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.UK.location}} </mat-cell>
</ng-container>

有人能告诉我如何像这样转换输出吗

location: {
country : 'UK'
}

或任何随机名称，例如

obj: {
location: 'UK'
//rest of values for grouping
}

fiddle

感谢大家

Answer 1

你可以这样做：

const countryMap = {};
data.response.forEach(item => {
   countryMap[item.location.country] = [ ...( countryMap[item.location.country] || [] ), item];
});

现在，countryMap 看起来像这样：

现在，进一步将其映射到您想要的格式，您可以这样做：

const mappedData = Object.entries(countryMap).map(entry => ({
   location: entry[0],
   response: entry[1]
}));

这将以这种格式生成 mappedData：

对嵌套的 json 响应进行分组和计数 - Angular

Group and count the nested json response - Angular

javascript

angular-material

angular

angular-material-table