如何在 Mat Table 中打印这个特定的 JSON？

Question

我有这个特定的 JSON 文件，我不允许更改，它看起来像这样：

{
"computers" : {
        "John" : {
            "version" : "1.42.0",
            "environment" : "Default",
            "platform" : "x64",
            "admin" : "true"
        },
        "Peter" : {
            "version" : "1.43.6",
            "environment" : "Default",
            "platform" : "x64",
            "admin" : "true"
        },
        "Eric" : {
            "version" : "1.43.6",
            "environment" : "Default",
            "platform" : "x64",
            "admin" : "false"
        }
}

我使用JSON.parse()方法解析文件，我把它放入MatTableDataSource.

问题是，当我需要在 MatTable 中显示它时，我无法真正按照我想要的方式访问它。

我有一列要显示所有 version 参数，因此我不能说：this.dataSource.computers.????.version

你们明白我的意思了吗？你知道我可以做些什么来解决这个问题吗？

期待您的阅读。

Answer 1

Angular mat-table 要求输入数据在数组中。首先，我们使用 Object.keys() to extract the keys, which will contain the list of names. Then, we can use Object.values() 以数组格式的每个键内的其他值。接下来是使用名称列表中的 name 属性映射上述数组对象。

const data = {
  "computers": {
    "John": {
      "version": "1.42.0",
      "environment": "Default",
      "platform": "x64",
      "admin": "true"
    },
    "Peter": {
      "version": "1.43.6",
      "environment": "Default",
      "platform": "x64",
      "admin": "true"
    },
    "Eric": {
      "version": "1.43.6",
      "environment": "Default",
      "platform": "x64",
      "admin": "false"
    }
  }
};

const nameList = Object.keys(data.computers);
const dataList = Object.values(data.computers).map((obj, index) => {
  obj['name'] = nameList[index];
  return obj;
});
console.log(dataList);

如何在 Mat Table 中打印这个特定的 JSON？

How to print this specific JSON in a Mat Table?

parsing

json

angular

mat-table