Align jSon Data In A Specific Format

I've the following mapping function (That I've from one of my previous posts) that checks whether an array property exists or not:

// Mapping function
const newdata = json.map((c) => {
const result: { [key: string]: string } = {};

if (c.hasOwnProperty("userName")) {
result["User Name"] = c.userName!;
}

if (c.hasOwnProperty("email")) {
result.Email = c.email!;
}

if (c.hasOwnProperty("newArrGroups") && Array.isArray(c.newArrGroups)) {
result.Groups = c.newArrGroups.map(a => a.name).toString();
}

if (c.hasOwnProperty("clientVersion")) {
result.Version = c.clientVersion!;
}

return result;
});


This is required as users may select some data or property to be shown in the frontend and I am handling that from frontend with a logic. The jSon data is as follows:

const data = [
{
"id": 654298,
"included": [
{
"id": 654298,
"levelColumn": "DIM4_COL5",
"levelColumnName": "Region",
"isIncluded": true,
"tabs": [
{
"tabId": 640111,
"tabName": "Growth"
},
{
"tabId": 640031,
"tabName": "Direct Sales"
},
{
"tabId": 640021,
"tabName": "Operator Review"
}
],
"levels": [
{
"permValue": "WEST FS",
"permName": "WEST FS"
}
]
}
],
"excluded": []
}
];


There are two important properties included and excluded, both are array type. Now the thing is, these two have to be checked at the same time in the above if condition and show in the frontend as follows:

This should be in one column as they are two different properties as formatted (I believe, this can be done without HTML embedding):

Included permissions:
1. For 'Region' level: //There could be multiple levels with same tabs or different
- Tabs:
- Direct Sales
- Operator Review
- Growth
- Permission levels:
- WEST FS
No excluded permissions.


Note that this is just one sample data, there would be a lot no. of data that I've to render in the specific format shown above user wise. So my question is how I can check the included and excluded properties at a time in the above code snippet? Something like this:

if (c.hasOwnProperty("included") || c.hasOwnProperty("excluded")) {
result.MergeBoth = /**Then render as the above format**/ //If no data, it can be kept blank


I tried the following code to implement the specific format with this code snippet, but seems like this is just a starting. May be I require some more modifications. Any sample would be much appreciated.

var peoples = [{name: 'Jhon', last_name: 'Doe', gender: 'm'},{name: 'Mario', last_name: 'Peach', gender: 'm'}]

var peopleString = "Included \n" + peoples.map(people => ` - ${people.name}, ${people.last_name}`).join('\n')

console.log(peopleString);


That returns the following:

Included
- Jhon, Doe
- Mario, Peach

Continue reading...