We Keep Coding

javascript JSON find and replace

I have some JSON I would like to do a find and replace on. The issue is that other parts of the JSON might also contain that string as a part of a word. For example timestamp and pw.alert.timestamp.iso.
I only want to replace it when the match is a standalone timestamp.
"blocks": [{
"text": {
"text": "pw.alert.severity - pw.alert.title - timestamp",
"type": "plain_text"
},
"type": "header"
}]
"color": "pw.state.severityColor",
"blocks": [{
"text": {
"type": "plain_text",
"text": "Triggered: pw.alert.timestamp.iso"
},
"type": "section"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "pw.alert.description"
}
},
Please see a sample for the JSON.
the function I am using to mod the JSON.
const handleRawInput = (htmlInput: string): string => {
let stash = htmlInput;
stash = stash.replace(/[\n\r]+|[\s]{2,}/g, '')
.replace("-{{", "- {{")
.replace(":{{", ": {{")
.replaceAll("-", "- ")
.replaceAll(":", ": ")
matchKeys.current.forEach((match) => {
const re = new RegExp(`\\b${match.key}\\b`, 'g')
stash = !stash.includes(`\{\{${match.key}\}}`) ? stash.replace(re, `\{\{${match.key}\}}`) : stash;
})
return stash
}
{
"blocks": [
{
"text": {
"type": "plain_text",
"text": "{{pw.alert.severity}} - {{pw.alert.title}} - {{violation_callback_url}}"
},
"type": "header"
}
],
"attachments": [
{
"blocks": [
{
"text": {
"text": "Triggered: {{pw.alert.timestamp.iso}}",
"type": "plain_text"
},
"type": "section"
},
{
"text": {
"text": "{{pw.alert.description}}",
"type": "mrkdwn"
},
"type": "section"
},
{
"elements": [
{
"url": "{{pw.alert.alertUrl}}",
"value": "View Alert",
"action_id": "button- action- 1",
"type": "button",
"text": {
"emoji": true,
"type": "plain_text",
"text": "View Alert"
}
}
],
"type": "actions"
},
{
"type": "header",
"text": {
"type": "plain_text",
"text": "CORRELATIONS"
}
},
{
"type": "section",
"text": {
"text": "<{{pw.link.openall}} | *Open All*> | <{{pw.link.downloadall}} | *Download All*>",
"type": "mrkdwn"
}
},
{
"type": "header",
"text": {
"type": "plain_text",
"text": "{{pw.workflow.destinationGroup.1.name}}",
"emoji": true
}
},
{
"type": "divider"
},
{
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.1.destination.0.url}} | *{{pw.workflow.destinationGroup.1.destination.0.name}}*>"
},
"type": "section"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.1.destination.1.url}} | *{{pw.workflow.destinationGroup.1.destination.1.name}}*>"
}
},
{
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.1.destination.2.url}} | *{{pw.workflow.destinationGroup.1.destination.2.name}}*>"
},
"type": "section"
},
{
"text": {
"text": "<{{pw.workflow.destinationGroup.1.destination.3.url}} | *{{pw.workflow.destinationGroup.1.destination.3.name}}*>",
"type": "mrkdwn"
},
"type": "section"
},
{
"text": {
"text": "<{{pw.workflow.destinationGroup.1.destination.4.url}} | *{{pw.workflow.destinationGroup.1.destination.4.name}}*>",
"type": "mrkdwn"
},
"type": "section"
},
{
"text": {
"emoji": true,
"text": "{{pw.workflow.destinationGroup.2.name}}",
"type": "plain_text"
},
"type": "header"
},
{
"type": "divider"
},
{
"text": {
"text": "<{{pw.workflow.destinationGroup.2.destination.0.url}} | *{{pw.workflow.destinationGroup.2.destination.0.name}}*>",
"type": "mrkdwn"
},
"type": "section"
},
{
"type": "header",
"text": {
"text": "{{pw.workflow.destinationGroup.3.name}}",
"type": "plain_text",
"emoji": true
}
},
{
"type": "divider"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.3.destination.0.url}} | *{{pw.workflow.destinationGroup.3.destination.0.name}}*>"
}
},
{
"type": "header",
"text": {
"text": "{{pw.workflow.destinationGroup.4.name}}",
"type": "plain_text",
"emoji": true
}
},
{
"type": "divider"
},
{
"text": {
"text": "<{{pw.workflow.destinationGroup.4.destination.0.url}} | *{{pw.workflow.destinationGroup.4.destination.0.name}}*>",
"type": "mrkdwn"
},
"type": "section"
},
{
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.4.destination.1.url}} | *{{pw.workflow.destinationGroup.4.destination.1.name}}*>"
},
"type": "section"
},
{
"text": {
"text": "<{{pw.workflow.destinationGroup.4.destination.2.url}} | *{{pw.workflow.destinationGroup.4.destination.2.name}}*>",
"type": "mrkdwn"
},
"type": "section"
},
{
"type": "header",
"text": {
"type": "plain_text",
"text": ": camera: Snapshots",
"emoji": true
}
},
{
"type": "divider"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.1.destination.0.snapshot.protectedUrl}} | *High- Resolution Image: {{pw.workflow.destinationGroup.1.destination.0.name}}*>"
}
},
{
"type": "image",
"title": {
"emoji": true,
"type": "plain_text",
"text": "{{pw.workflow.destinationGroup.1.destination.0.name}}"
},
"alt_text": "{{pw.workflow.destinationGroup.1.destination.0.name}}",
"image_url": "{{pw.workflow.destinationGroup.1.destination.0.snapshot.publicUrl}}"
},
{
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.1.destination.3.snapshot.protectedUrl}} | *High- Resolution Image: {{pw.workflow.destinationGroup.1.destination.3.name}}*>"
},
"type": "section"
},
{
"alt_text": "{{pw.workflow.destinationGroup.1.destination.3.name}}",
"title": {
"emoji": true,
"text": "{{pw.workflow.destinationGroup.1.destination.3.name}}",
"type": "plain_text"
},
"type": "image",
"image_url": "{{pw.workflow.destinationGroup.1.destination.3.snapshot.publicUrl}}"
}
],
"color": "{{pw.state.severityColor}}"
}
]
}

I resolved the issue by running a cleanup on the JSON string after the replacement.
const handleRawInput = (htmlInput: string): string => {
let stash = htmlInput;
stash = stash.replace(/[\n\r]+|[\s]{2,}/g, '')
.replace("-{{", "- {{")
.replace(":{{", ": {{")
.replaceAll("-", "- ")
.replaceAll(":", ": ")
matchKeys.current.forEach((match) => {
stash = !stash.includes(`\{\{${match.key}\}}`) ? stash.replace(match.key, `\{\{${match.key}\}}`) : stash;
})
return stash.replaceAll(".{{", ".").replaceAll("}}.", ".")
}

Javascript: Get value of json string

I have this JSON string:
var json = {
"cdl": {
"06A78000000YNR7EAO": {
"attributes": {
"type": "CDL",
"url": "/services/data"
},
"CDI": "06978000000GIjCAAW",
"LEI": "a1U78000000SUtTEAW",
"Id": "06A78000000YNR7EAO",
"CD": {
"attributes": {
"type": "CD",
"url": "/services/data"
},
"Title": "photo-1517849845537-4d257902454a",
"Id": "06978000000GIjCAAW"
}
},
"06A78000000YNPGEA4": {
"attributes": {
"type": "CDL",
"url": "/services/data"
},
"CDI": "06978000000GIhuAAG",
"LEI": "a1U78000000SUtOEAW",
"Id": "06A78000000YNPGEA4",
"CD": {
"attributes": {
"type": "CD",
"url": "/services/data"
},
"Title": "photo-1517519014922-8fc06b814a0e",
"Id": "06978000000GIhuAAG"
}
}
},
"documents": {
"a1U78000000SUtTEAW": {
"attributes": {
"type": "DR",
"url": "/services/data"
},
"Id": "a1U78000000SUtTEAW",
"Name": "test2"
},
"a1U78000000SUtOEAW": {
"attributes": {
"type": "DR",
"url": "/services/data"
},
"Id": "a1U78000000SUtOEAW",
"Name": "test"
}
}
}
I can access to the document name like this:
console.log(Object.values(json)[1]["a1U78000000SUtTEAW"]["Name"]);
how can i know how much documents are and how can i get the name without using "a1U78000000SUtTEAW"?

try this
Object.keys(json.documents).forEach(key => {
console.log("\n" + key + ": " + json.documents[key].Name);
});
or this
var documents= Object.values(json.documents);
console.log(documents.length); //2
console.log(documents[0].Id); // a1U78000000SUtTEAW
console.log(documents[0].Name); // test2

Storing data in an array on the basis of a flag

I am working on a angular application. I have one array and in it I have one flag "checked". I need to do some manipulation
on the basis of this flag. My sample data is as follows:
const data = [{
"checked": true,
"children": [{
"checked": true,
"data": {
"name": "myName"
},
"parent": {
"data": {
"name": "myName2"
},
"parent": {
"data": {
"name": "myName3"
}
}
}
}, {
"checked": true,
"data": {
"name": "myNamePart2"
},
"parent": {
"data": {
"name": "myName2"
},
"parent": {
"data": {
"name": "myName3"
}
}
}
}
]
}, {
"checked": false,
"children": [{
"checked": true,
"data": {
"name": "myName4"
},
"parent": {
"data": {
"name": "myName5"
},
"parent": {
"data": {
"name": "myName6"
}
}
}
}
]
}, {
"checked": true,
"children": [{
"checked": true,
"data": {
"name": "myName7"
},
"parent": {
"data": {
"name": "myName8"
},
"parent": {
"data": {
"name": "myName9"
}
}
}
}
]
},
{
"checked": true,
"data": {
"name": "myName10"
},
"parent": {
"data": {
"name": "myName11"
},
"parent": {
"data": {
"name": "myName12"
}
}
}
},
{
"checked": false,
"data": {
"name": "myName13"
},
"parent": {
"data": {
"name": "myName14"
},
"parent": {
"data": {
"name": "myName15"
}
}
}
}
];
In this array, if for any index if "checked" is true, then I want to check the "checked" flag for each children. If for any children, if "checked" flag is
true, then I want to have data from parent name to children name separated by "/" in an array. For above data my final array will have
result = ["myName3/myName2/myName","myName3/myName2/myNamePart2","myName9/myName8/myName7","myName12/myName11/myName10"]
How can I do that?

I've found a pretty short recursive solution to your problem:
const data = [{
"checked": true,
"children": [{
"checked": true,
"data": {
"name": "myName"
},
"parent": {
"data": {
"name": "myName2"
},
"parent": {
"data": {
"name": "myName3"
}
}
}
}, {
"checked": true,
"data": {
"name": "myNamePart2"
},
"parent": {
"data": {
"name": "myName2"
},
"parent": {
"data": {
"name": "myName3"
}
}
}
}
]
}, {
"checked": false,
"children": [{
"checked": true,
"data": {
"name": "myName4"
},
"parent": {
"data": {
"name": "myName5"
},
"parent": {
"data": {
"name": "myName6"
}
}
}
}
]
}, {
"checked": true,
"children": [{
"checked": true,
"data": {
"name": "myName7"
},
"parent": {
"data": {
"name": "myName8"
},
"parent": {
"data": {
"name": "myName9"
}
}
}
}
]
}, {
"checked": true,
"data": {
"name": "myName10"
},
"parent": {
"data": {
"name": "myName11"
},
"parent": {
"data": {
"name": "myName12"
}
}
}
}, {
"checked": false,
"data": {
"name": "myName13"
},
"parent": {
"data": {
"name": "myName14"
},
"parent": {
"data": {
"name": "myName15"
}
}
}
}
];
const compute = data =>
data
.flatMap(x => x.checked && x.children)
.concat(data)
.filter(x => x && x.checked && x.data)
.map(x => createPath(x))
.map(x => x.join("/"));
const createPath = (node, currentPath = []) =>
node.parent
? createPath(node.parent, [node.data.name, ...currentPath])
: [node.data.name, ...currentPath];
console.log(compute(data));

how to find the ancestors of a particular object

let obj = {
"options": [
{
"id": "a",
"name": "a",
"options": [
{
"id": "a.1",
"options": [
{
"id": "a.1.1",
"name": "a.1.1"
},
{
"id": "a.1.2",
"name": "a.1.2"
},
{
"id": "a.1.3",
"name": "a.1.3"
}
]
},
{
"id": "a.2",
"name": "a.2",
"options": [
{
"id": "a.2.1",
"name": "a.2.1"
},
{
"id": "a.2.2",
"name": "a.2.2"
},
{
"id": "a.2.3",
"name": "a.2.3"
}
]
},
{
"id": "a.3",
"name": "a.3",
"options": [
{
"id": "a.3.1",
"name": "a.3.1"
},
{
"id": "a.3.2",
"name": "a.3.1"
},
{
"id": "a.3.3",
"name": "a.3.1"
}
]
}
]
},
{
"name": "b",
"id": "b",
"options": [
{
"id": "b.1",
"name": "b.1",
"options": [
{
"id": "b.1.1",
"name": "b.1.1"
},
{
"id": "b.1.2",
"name": "b.1.2"
},
{
"id": "b.1.3",
"name": "b.1.3"
}
]
},
{
"id": "b.2",
"name": "b.2",
"options": [
{
"id": "b.2.1",
"name": "b.2.1"
},
{
"id": "b.2.2",
"name": "b.2.2"
},
{
"id": "b.2.3",
"name": "b.2.3"
}
]
},
{
"id": "b.3",
"name": "b.3.1",
"options": [
{
"id": "b.3.1",
"name": "b.3.1"
},
{
"id": "b.3.2",
"name": "b.3.2"
},
{
"id": "b.3.3",
"name": "b.3.3"
}
]
}
]
},
{
"id": "c",
"name": "c",
"options": [
{
"id": "c.1",
"name": "c.1",
"options": [
{
"id": "c.1.1",
"name": "c.1.1"
},
{
"id": "c.1.2",
"name": "c.1.2"
},
{
"id": "c.1.3",
"name": "c.1.3"
}
]
},
{
"id": "c.2",
"name": "c.2",
"options": [
{
"id": "c.2.1",
"name": "c.2.1"
},
{
"id": "c.2.2",
"name": "c.2.2"
},
{
"id": "c.2.3",
"name": "c.2.3"
}
]
},
{
"id": "c.3",
"name": "c.3",
"options": [
{
"id": "c.3.1",
"name": "c.3.1"
},
{
"id": "c.3.2",
"name": "c.3.2"
},
{
"id": "c.3.3",
"name": "c.3.3"
}
]
}
]
}
]
}
" I have this object
I neeed to create a function getHierarchy, that an option ID as its input, finds the option in the
list and returns the ID of all it's parents.
for example,getHierarchy("a.1.3") should return the following result ["a","a.1","a.1.3"]
getHierarchy("c.3.3") should return the following result ["c","c.3","c.3.3"] "

assuming id is unique;
function getHierarchy(object, id, prev) {
if (!object.options) return;
for (const child of object.options) {
if(child.id === id) {
return [...prev, object.id, child.id];
}
result = getHierarchy(child, id, [...prev, object.id]);
if (result) return result;
}
}
getHierarchy(obj, "a.1.3", []);

Here an recursive solution i hope this helps you.
let obj = {
"options": [
{
"id": "a",
"name": "a",
"options": [
{
"id": "a.1",
"options": [
{
"id": "a.1.1",
"name": "a.1.1"
},
{
"id": "a.1.2",
"name": "a.1.2"
},
{
"id": "a.1.3",
"name": "a.1.3"
}
]
},
{
"id": "a.2",
"name": "a.2",
"options": [
{
"id": "a.2.1",
"name": "a.2.1"
},
{
"id": "a.2.2",
"name": "a.2.2"
},
{
"id": "a.2.3",
"name": "a.2.3"
}
]
},
{
"id": "a.3",
"name": "a.3",
"options": [
{
"id": "a.3.1",
"name": "a.3.1"
},
{
"id": "a.3.2",
"name": "a.3.1"
},
{
"id": "a.3.3",
"name": "a.3.1"
}
]
}
]
},
{
"name": "b",
"id": "b",
"options": [
{
"id": "b.1",
"name": "b.1",
"options": [
{
"id": "b.1.1",
"name": "b.1.1"
},
{
"id": "b.1.2",
"name": "b.1.2"
},
{
"id": "b.1.3",
"name": "b.1.3"
}
]
},
{
"id": "b.2",
"name": "b.2",
"options": [
{
"id": "b.2.1",
"name": "b.2.1"
},
{
"id": "b.2.2",
"name": "b.2.2"
},
{
"id": "b.2.3",
"name": "b.2.3"
}
]
},
{
"id": "b.3",
"name": "b.3.1",
"options": [
{
"id": "b.3.1",
"name": "b.3.1"
},
{
"id": "b.3.2",
"name": "b.3.2"
},
{
"id": "b.3.3",
"name": "b.3.3"
}
]
}
]
},
{
"id": "c",
"name": "c",
"options": [
{
"id": "c.1",
"name": "c.1",
"options": [
{
"id": "c.1.1",
"name": "c.1.1"
},
{
"id": "c.1.2",
"name": "c.1.2"
},
{
"id": "c.1.3",
"name": "c.1.3"
}
]
},
{
"id": "c.2",
"name": "c.2",
"options": [
{
"id": "c.2.1",
"name": "c.2.1"
},
{
"id": "c.2.2",
"name": "c.2.2"
},
{
"id": "c.2.3",
"name": "c.2.3"
}
]
},
{
"id": "c.3",
"name": "c.3",
"options": [
{
"id": "c.3.1",
"name": "c.3.1"
},
{
"id": "c.3.2",
"name": "c.3.2"
},
{
"id": "c.3.3",
"name": "c.3.3"
}
]
}
]
}
]
}
function getHierarchy(opts, path, index = 1, result = []) {
if(!opts) return result;
let objPaths = path.split(".");
let _path = objPaths.slice(0, index).join(".");
let option = opts.find(({id}) => id === _path);
if(!option) return result;
let { options, id } = option;
return getHierarchy(options, path, ++index, [...result,id]);
}
let result = getHierarchy(obj.options, "a.1.3");
console.log(result);

How do I filter an array of data by id or name using another array of data to display in React Table?

I have a role-template array that gives each role a name, and a description. It also has a nested object with an array of permissions that are identified by id.
{
"data": [
{
"id": "1",
"type": "role-templates",
"attributes": {
"name": "Org Admin"
},
"relationships": {
"permissions": {
"data": [
{ "type": "permissions", "id": "1" },
{ "type": "permissions", "id": "2" },
{ "type": "permissions", "id": "3" },
{ "type": "permissions", "id": "4" },
{ "type": "permissions", "id": "5" },
{ "type": "permissions", "id": "6" },
{ "type": "permissions", "id": "7" },
{ "type": "permissions", "id": "8" },
{ "type": "permissions", "id": "9" },
{ "type": "permissions", "id": "10" },
{ "type": "permissions", "id": "11" },
{ "type": "permissions", "id": "12" },
{ "type": "permissions", "id": "13" },
{ "type": "permissions", "id": "14" },
{ "type": "permissions", "id": "15" },
{ "type": "permissions", "id": "17" },
{ "type": "permissions", "id": "18" },
{ "type": "permissions", "id": "19" },
{ "type": "permissions", "id": "20" },
{ "type": "permissions", "id": "21" },
{ "type": "permissions", "id": "23" },
{ "type": "permissions", "id": "24" }
]
}
}
},
{
"id": "2",
"type": "role-templates",
"attributes": { "name": "Data Admin" },
"relationships": {
"permissions": {
"data": [
{ "type": "permissions", "id": "1" },
{ "type": "permissions", "id": "2" },
{ "type": "permissions", "id": "3" },
{ "type": "permissions", "id": "4" },
{ "type": "permissions", "id": "5" },
{ "type": "permissions", "id": "6" }
]
}
}
},
{
"id": "3",
"type": "role-templates",
"attributes": {
"name": "Setup Admin"
},
"relationships": {
"permissions": {
"data": [{ "type": "permissions", "id": "8" }]
}
}
},
{
"id": "4",
"type": "role-templates",
"attributes": { "name": "Data Consumer"},
"relationships": {
"permissions": {
"data": [
{ "type": "permissions", "id": "11" },
{ "type": "permissions", "id": "13" }
]
}
}
},
{
"id": "5",
"type": "role-templates",
"attributes": { "name": "APT User" },
"relationships": {
"permissions": {
"data": [
{ "type": "permissions", "id": "17" },
{ "type": "permissions", "id": "18" },
{ "type": "permissions", "id": "19" }
]
}
}
},
{
"id": "6",
"type": "role-templates",
"attributes": {
"name": "User Admin"
},
"relationships": {
"permissions": {
"data": [
{ "type": "permissions", "id": "21" },
{ "type": "permissions", "id": "23" }
]
}
}
}
],
"meta": { "record-count": 6 }
}
Now I have a permissions array that gives each permission a name, and an id. That id can be matched to the nested array in the role-template array. I want to match these two arrays by the permission.id property that each of these arrays posses. Then for each role that has a permission. I want to display an asterisk * for this
How can I do that?
[
{
"id": "1",
"type": "permissions",
"attributes": {
"name": "Administer Source List",
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "2" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "8" }
]
}
}
},
{
"id": "2",
"type": "permissions",
"attributes": {
"name": "Administer Common Layers",
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "2" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "8" }
]
}
}
},
{
"id": "3",
"type": "permissions",
"attributes": {
"name": "Do benchmark tagging"
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "2" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "8" }
]
}
}
},
{
"id": "4",
"type": "permissions",
"attributes": {
"name": "Do trend mapping"
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "2" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "8" }
]
}
}
},
{
"id": "5",
"type": "permisns",
"attributes": {
"name": "Map custom values (for each data source)"
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "2" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "8" }
]
}
}
},
{
"id": "6",
"type": "permissions",
"attributes": {
"name": "Administer Data Sets"
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "2" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "8" }
]
}
}
},
{
"id": "7",
"type": "permisns"
"attributes": {
"name": "Create Campaigns"
},
"relationships": {
"roles": {
"data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
}
}
},
{
"id": "8",
"type": "permissions",
"attributes": {
"name": "Access/modify campaign setup"
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "3" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "9" }
]
}
}
},
{
"id": "9",
"type": "permissions",
"attributes": {
"name": "Launch campaigns"
},
"relationships": {
"roles": {
"data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
}
}
},
{
"id": "10",
"type": "permissions",
"attributes": {
"name": "Create org-wide survey-related notifications"
},
"relationships": {
"roles": {
"data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
}
}
},
{
"id": "11",
"type": "permissions",
"attributes": {
"name": "View Reports"
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "4" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "10" }
]
}
}
},
{
"id": "12",
"type": "permissions",
"attributes": {
"name": "Modify prebuilt reports"
},
"relationships": {
"roles": {
"data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
}
}
},
{
"id": "13",
"type": "permissions",
"attributes": {
"name": "Create new reports"
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "4" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "10" }
]
}
}
},
{
"id": "14",
"type": "permissions",
"attributes": {
"name": "Share reports with rest of org"
},
"relationships": {
"roles": {
"data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
}
}
},
{
"id": "15",
"type": "permissions",
"attributes": {
"name": "Share filters with rest of org"
},
"relationships": {
"roles": {
"data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
}
}
},
{
"id": "16",
"type": "permissions",
"attributes": {
"name": "Create portfolio"
},
"relationships": {
"roles": {
"data": []
}
}
},
{
"id": "17",
"type": "permissions",
"attributes": {
"name": "Access all portfolios (at org)"
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "5" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "11" }
]
}
}
},
{
"id": "18",
"type": "permissions",
"attributes": {
"name": "Assign action plans"
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "5" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "11" }
]
}
}
},
{
"id": "19",
"type": "permissions",
"attributes": {
"name": "Work on action plans"
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "5" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "11" }
]
}
}
},
{
"id": "20",
"type": "permissions",
"attributes": {
"name": "Administer role templates for org"
},
"relationships": {
"roles": {
"data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
}
}
},
{
"id": "21",
"type": "permissions",
"attributes": {
"name": "Add/edit/delete non org-admin users at org"
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "6" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "12" }
]
}
}
},
{
"id": "22",
"type": "permissions",
"attributes": {
"name": "Add/edit/dete ORg Admin users at org"
},
"relationships": {
"roles": {
"data": []
}
}
},
{
"id": "23",
"type": "permissions",
"attributes": {
"name": "Administer access patterns at org"
},
"relationships": {
"roles": {
"data": [
{ "type": "roles", "id": "1" },
{ "type": "roles", "id": "6" },
{ "type": "roles", "id": "7" },
{ "type": "roles", "id": "12" }
]
}
}
},
{
"id": "24",
"type": "permissions",
"attributes": {
"name": "Switch user (\"Impersonate\" another user)"
},
"relationships": {
"roles": {
"data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
}
}
}
]
My react table looks like this right now:
What I want to do is to put an asterisk * in every cell for the permission that each role has.
My React component currently looks like this:
class SystemRoleTemplatesContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
permissionList: [],
roleTemplateList: [],
permissionsGroup: []
};
}
componentDidMount = () => {
this.getTableData();
}
getTableData = () => {
store.dispatch(api.getRoletemplates()).then((result) => {
const permissionHeader = [{
Header: "Permissions",
accessor: "permission"
}]
const roleTemplateItems = result.body.data.map((data) => {
return {
id: data.relationships.permissions.data.map((data)=>{
return {
id: data.id
}
}),
Header: data.attributes.name,
accessor: data.attributes.name.replace(/\s/g, '')
}
});
const roleTemplate = permissionHeader.concat(roleTemplateItems)
this.setState(() => ({
"roleTemplateList": roleTemplate
}));
});
store.dispatch(api.getPermissions()).then((result) => {
const permissionItems = result.body.data.map((data) => {
return {
id: data.id,
permission: data.attributes.name
}
});
this.setState(() => ({
"permissionList": permissionItems
}));
});
}
render() {
const {isLoading,roleTemplateList, permissionList} = this.state;
if (isLoading) {
return <LoadingAnimation />;
}
return (
<div className="role-management-form">
<div className="admin-user-container-title">
<Row>
<Col md={8}>
<h3>Manage Roles Template for System</h3>
</Col>
</Row>
</div>
<Table
columns={roleTemplateList}
className="organization-tbl"
data={permissionList}
defaultPageSize={50}
minRows={0}
/>
</div>
);
}
}

So I was able to use lodash to accomplish this.
class SystemRoleTemplatesContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
permissionList: [],
roleTemplateList: []
};
}
componentDidMount = () => {
this.getTableData();
}
getTableData = () => {
store.dispatch(api.getRoletemplates()).then((result) => {
const permissionHeader = [{
Header: "Permissions",
accessor: "permission"
}]
const roleTemplateItems = result.body.data.map((data) => {
return {
id: data.relationships.permissions.data.map((data)=>{
return {
id: data.id
}
}),
Header: data.attributes.name,
accessor: data.attributes.name.replace(/\s/g, '')
}
});
const roleTemplate = permissionHeader.concat(roleTemplateItems)
this.setState(() => ({
"roleTemplateList": roleTemplate
}));
});
store.dispatch(api.getPermissions()).then((result) => {
const permissionItems = result.body.data.map((data) => {
return {
id: data.id,
permission: data.attributes.name
}
});
this.setState(() => ({
"permissionList": permissionItems
}));
});
}
render() {
const {isLoading,roleTemplateList, permissionList} = this.state;
const updatedList = permissionList.map(permission => {
return roleTemplateList.reduce((permAcc, role) => {
const match = _.find(role.id, {'id': permAcc.id});
if(typeof match !== 'undefined' && role.accessor !== 'permission') {
permAcc[role.accessor] = '*';
} else if(role.accessor !== 'permission') {
permAcc[role.accessor] = '';
}
return permAcc;
}, permission);
});
if (isLoading) {
return <LoadingAnimation />;
}
return (
<div className="role-management-form">
<div className="admin-user-container-title">
<Row>
<Col md={8}>
<h3>Manage Roles Template for System</h3>
</Col>
</Row>
</div>
<Table
columns={roleTemplateList}
className="organization-tbl"
data={updatedList}
defaultPageSize={50}
minRows={0}
/>
</div>
);
}
}