CODEWITHSUNDEEP
jsonangularparsingmat-table
Zako
Zako

Reputation: 151

How to print this specific JSON in a Mat Table?

I have this specific JSON file I'm not allowed to change, which looks like this : 

{
"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"
        }
}

I use the JSON.parse() method to parse the file and I put it into a MatTableDataSource.

Problem is, when I need to display it in my MatTable, I can't really access it the way I want.

I have a column where I want to display all version parameters, so for this I can't say : this.dataSource.computers.????.version

Do you guys see where I'm getting at ? Do you have any idea of what I can do differently in order to solve this ?

Looking forward to reading you.

Upvotes: 0

Views: 734

Answers (1)

wentjun
wentjun

Reputation: 42516

The Angular mat-table requires the input data to be in an array. First, we use Object.keys() to extract the keys, which will contain the list of names. Then, we can use Object.values() to other values within each key in array format. This is followed by mapping the above array objects with the name property from the list of names.

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);

Upvotes: 1

Related Questions