如何为我的react组件按ID过滤数据列表以获取对象的名称

时间:2018-08-10 14:52:57

标签: javascript json reactjs react-redux json-api

所以我有一个来自redux-store的数据列表,也有JSON.stringified,所以我可以读取它。我想过滤permissions的列表,该列表仅向我提供id以获取每个权限的name,因此我可以在{{1 }}。

这里是一个示例项目:

Permission Name

这又是来自后端的权限端点的数据,我React Component

{
    "id": "1",
    "type": "role-templates",
    "links": { "self": "http://localhost/v1/role-templates/1" },
    "attributes": {
      "name": "Org Admin",
      "description": "Administers an Organization"
    },
    "relationships": {
      "role-template-permission-list": {
        "links": {
          "self":
            "http://localhost/v1/role-templates/1/relationships/role-template-permission-list",
          "related":
            "http://localhost/v1/role-templates/1/role-template-permission-list"
        }
      },
      "permissions": {
        "links": {
          "self":
            "http://localhost/v1/role-templates/1/relationships/permissions",
          "related":
            "http://localhost/v1/role-templates/1/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" }
        ]
      }
    }

因此,您可以看到每个权限都有一个JSON.stringified it for this slack question[ { "id": "1", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/1" }, "attributes": { "name": "Administer Source List", "description": "Data Source", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/1/relationships/role-permission-list", "related": "http://localhost/v1/permissions/1/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/1/relationships/roles", "related": "http://localhost/v1/permissions/1/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "2" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "8" } ] } } }, { "id": "2", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/2" }, "attributes": { "name": "Administer Common Layers", "description": "Data Source", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/2/relationships/role-permission-list", "related": "http://localhost/v1/permissions/2/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/2/relationships/roles", "related": "http://localhost/v1/permissions/2/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "2" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "8" } ] } } }, { "id": "3", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/3" }, "attributes": { "name": "Do benchmark tagging", "description": "Data Source", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/3/relationships/role-permission-list", "related": "http://localhost/v1/permissions/3/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/3/relationships/roles", "related": "http://localhost/v1/permissions/3/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "2" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "8" } ] } } }, { "id": "4", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/4" }, "attributes": { "name": "Do trend mapping", "description": "Data Source", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/4/relationships/role-permission-list", "related": "http://localhost/v1/permissions/4/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/4/relationships/roles", "related": "http://localhost/v1/permissions/4/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "2" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "8" } ] } } }, { "id": "5", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/5" }, "attributes": { "name": "Map custom values (for each data source)", "description": "Data Source", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/5/relationships/role-permission-list", "related": "http://localhost/v1/permissions/5/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/5/relationships/roles", "related": "http://localhost/v1/permissions/5/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "2" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "8" } ] } } }, { "id": "6", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/6" }, "attributes": { "name": "Administer Data Sets", "description": "Data Sets", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/6/relationships/role-permission-list", "related": "http://localhost/v1/permissions/6/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/6/relationships/roles", "related": "http://localhost/v1/permissions/6/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "2" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "8" } ] } } }, { "id": "7", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/7" }, "attributes": { "name": "Create Campaigns", "description": "Campaigns", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/7/relationships/role-permission-list", "related": "http://localhost/v1/permissions/7/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/7/relationships/roles", "related": "http://localhost/v1/permissions/7/roles" }, "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }] } } }, { "id": "8", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/8" }, "attributes": { "name": "Access/modify campaign setup", "description": "Campaigns", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/8/relationships/role-permission-list", "related": "http://localhost/v1/permissions/8/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/8/relationships/roles", "related": "http://localhost/v1/permissions/8/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "3" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "9" } ] } } }, { "id": "9", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/9" }, "attributes": { "name": "Launch campaigns", "description": "Campaigns", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/9/relationships/role-permission-list", "related": "http://localhost/v1/permissions/9/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/9/relationships/roles", "related": "http://localhost/v1/permissions/9/roles" }, "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }] } } }, { "id": "10", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/10" }, "attributes": { "name": "Create org-wide survey-related notifications", "description": "Campaigns", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/10/relationships/role-permission-list", "related": "http://localhost/v1/permissions/10/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/10/relationships/roles", "related": "http://localhost/v1/permissions/10/roles" }, "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }] } } }, { "id": "11", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/11" }, "attributes": { "name": "View Reports", "description": "Reports", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/11/relationships/role-permission-list", "related": "http://localhost/v1/permissions/11/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/11/relationships/roles", "related": "http://localhost/v1/permissions/11/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "4" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "10" } ] } } }, { "id": "12", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/12" }, "attributes": { "name": "Modify prebuilt reports", "description": "Reports", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/12/relationships/role-permission-list", "related": "http://localhost/v1/permissions/12/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/12/relationships/roles", "related": "http://localhost/v1/permissions/12/roles" }, "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }] } } }, { "id": "13", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/13" }, "attributes": { "name": "Create new reports", "description": "Reports", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/13/relationships/role-permission-list", "related": "http://localhost/v1/permissions/13/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/13/relationships/roles", "related": "http://localhost/v1/permissions/13/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "4" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "10" } ] } } }, { "id": "14", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/14" }, "attributes": { "name": "Share reports with rest of org", "description": "Reports", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/14/relationships/role-permission-list", "related": "http://localhost/v1/permissions/14/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/14/relationships/roles", "related": "http://localhost/v1/permissions/14/roles" }, "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }] } } }, { "id": "15", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/15" }, "attributes": { "name": "Share filters with rest of org", "description": "Reports", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/15/relationships/role-permission-list", "related": "http://localhost/v1/permissions/15/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/15/relationships/roles", "related": "http://localhost/v1/permissions/15/roles" }, "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }] } } }, { "id": "16", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/16" }, "attributes": { "name": "Create portfolio", "description": "APT", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/16/relationships/role-permission-list", "related": "http://localhost/v1/permissions/16/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/16/relationships/roles", "related": "http://localhost/v1/permissions/16/roles" }, "data": [] } } }, { "id": "17", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/17" }, "attributes": { "name": "Access all portfolios (at org)", "description": "APT", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/17/relationships/role-permission-list", "related": "http://localhost/v1/permissions/17/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/17/relationships/roles", "related": "http://localhost/v1/permissions/17/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "5" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "11" } ] } } }, { "id": "18", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/18" }, "attributes": { "name": "Assign action plans", "description": "APT", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/18/relationships/role-permission-list", "related": "http://localhost/v1/permissions/18/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/18/relationships/roles", "related": "http://localhost/v1/permissions/18/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "5" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "11" } ] } } }, { "id": "19", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/19" }, "attributes": { "name": "Work on action plans", "description": "APT", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/19/relationships/role-permission-list", "related": "http://localhost/v1/permissions/19/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/19/relationships/roles", "related": "http://localhost/v1/permissions/19/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "5" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "11" } ] } } }, { "id": "20", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/20" }, "attributes": { "name": "Administer role templates for org", "description": "Manage Users", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/20/relationships/role-permission-list", "related": "http://localhost/v1/permissions/20/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/20/relationships/roles", "related": "http://localhost/v1/permissions/20/roles" }, "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }] } } }, { "id": "21", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/21" }, "attributes": { "name": "Add/edit/delete non org-admin users at org", "description": "Manage Users", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/21/relationships/role-permission-list", "related": "http://localhost/v1/permissions/21/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/21/relationships/roles", "related": "http://localhost/v1/permissions/21/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "6" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "12" } ] } } }, { "id": "22", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/22" }, "attributes": { "name": "Add/edit/dete ORg Admin users at org", "description": "Manage Users", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/22/relationships/role-permission-list", "related": "http://localhost/v1/permissions/22/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/22/relationships/roles", "related": "http://localhost/v1/permissions/22/roles" }, "data": [] } } }, { "id": "23", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/23" }, "attributes": { "name": "Administer access patterns at org", "description": "Manage Users", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/23/relationships/role-permission-list", "related": "http://localhost/v1/permissions/23/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/23/relationships/roles", "related": "http://localhost/v1/permissions/23/roles" }, "data": [ { "type": "roles", "id": "1" }, { "type": "roles", "id": "6" }, { "type": "roles", "id": "7" }, { "type": "roles", "id": "12" } ] } } }, { "id": "24", "type": "permissions", "links": { "self": "http://localhost/v1/permissions/24" }, "attributes": { "name": "Switch user (\"Impersonate\" another user)", "description": "Manage Users", "is-active": null }, "relationships": { "role-permission-list": { "links": { "self": "http://localhost/v1/permissions/24/relationships/role-permission-list", "related": "http://localhost/v1/permissions/24/role-permission-list" } }, "roles": { "links": { "self": "http://localhost/v1/permissions/24/relationships/roles", "related": "http://localhost/v1/permissions/24/roles" }, "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }] } } } ] 。 因此,我想通过使用name过滤器来检索每个description的名称。

2 个答案:

答案 0 :(得分:1)

您的客户数据包含用于获取所需数据的链接。

roleTemplate.relationships.permissions.links.self
//=> "http://localhost/v1/role-templates/1/relationships/permissions"

const roleTemplate = {
    id: "1",
    type: "role-templates",
    links: {
        self: "http://localhost/v1/role-templates/1"
    },
    attributes: {
        name: "Org Admin",
        description: "Administers an Organization"
    },
    relationships: {
        "role-template-permission-list": {
            links: {
                self: "http://localhost/v1/role-templates/1/relationships/role-template-permission-list",
                related: "http://localhost/v1/role-templates/1/role-template-permission-list"
            }
        },
        permissions: {
            links: {
                self: "http://localhost/v1/role-templates/1/relationships/permissions",
                related: "http://localhost/v1/role-templates/1/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"}
            ]
        }
    }
};

console.log( roleTemplate.relationships.permissions.links.self );

从此url请求应返回属于角色模板的所有权限,包括名称描述

答案 1 :(得分:1)

在包含permissions的第二个请求的结果中,可以对name数据中的所有元素使用map并对数据中的find元素使用{{3}} description

const result = roleTemplate.relationships.permissions.data.map(permission => {
  const permissionData = data.find(element => element.id === permission.id);
  return {
    id: permission.id,
    name: permissionData.attributes.name,
    description: permissionData.attributes.description
  };
});

const roleTemplate = {
  id: "1",
  type: "role-templates",
  links: { self: "http://localhost/v1/role-templates/1" },
  attributes: {
    name: "Org Admin",
    description: "Administers an Organization"
  },
  relationships: {
    "role-template-permission-list": {
      links: {
        self:
          "http://localhost/v1/role-templates/1/relationships/role-template-permission-list",
        related:
          "http://localhost/v1/role-templates/1/role-template-permission-list"
      }
    },
    permissions: {
      links: {
        self: "http://localhost/v1/role-templates/1/relationships/permissions",
        related: "http://localhost/v1/role-templates/1/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" }
      ]
    }
  }
};

const data = [
  {
    id: "1",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/1" },
    attributes: {
      name: "Administer Source List",
      description: "Data Source",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/1/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/1/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/1/relationships/roles",
          related: "http://localhost/v1/permissions/1/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "2" },
          { type: "roles", id: "7" },
          { type: "roles", id: "8" }
        ]
      }
    }
  },
  {
    id: "2",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/2" },
    attributes: {
      name: "Administer Common Layers",
      description: "Data Source",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/2/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/2/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/2/relationships/roles",
          related: "http://localhost/v1/permissions/2/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "2" },
          { type: "roles", id: "7" },
          { type: "roles", id: "8" }
        ]
      }
    }
  },
  {
    id: "3",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/3" },
    attributes: {
      name: "Do benchmark tagging",
      description: "Data Source",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/3/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/3/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/3/relationships/roles",
          related: "http://localhost/v1/permissions/3/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "2" },
          { type: "roles", id: "7" },
          { type: "roles", id: "8" }
        ]
      }
    }
  },
  {
    id: "4",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/4" },
    attributes: {
      name: "Do trend mapping",
      description: "Data Source",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/4/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/4/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/4/relationships/roles",
          related: "http://localhost/v1/permissions/4/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "2" },
          { type: "roles", id: "7" },
          { type: "roles", id: "8" }
        ]
      }
    }
  },
  {
    id: "5",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/5" },
    attributes: {
      name: "Map custom values (for each data source)",
      description: "Data Source",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/5/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/5/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/5/relationships/roles",
          related: "http://localhost/v1/permissions/5/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "2" },
          { type: "roles", id: "7" },
          { type: "roles", id: "8" }
        ]
      }
    }
  },
  {
    id: "6",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/6" },
    attributes: {
      name: "Administer Data Sets",
      description: "Data Sets",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/6/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/6/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/6/relationships/roles",
          related: "http://localhost/v1/permissions/6/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "2" },
          { type: "roles", id: "7" },
          { type: "roles", id: "8" }
        ]
      }
    }
  },
  {
    id: "7",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/7" },
    attributes: {
      name: "Create Campaigns",
      description: "Campaigns",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/7/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/7/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/7/relationships/roles",
          related: "http://localhost/v1/permissions/7/roles"
        },
        data: [{ type: "roles", id: "1" }, { type: "roles", id: "7" }]
      }
    }
  },
  {
    id: "8",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/8" },
    attributes: {
      name: "Access/modify campaign setup",
      description: "Campaigns",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/8/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/8/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/8/relationships/roles",
          related: "http://localhost/v1/permissions/8/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "3" },
          { type: "roles", id: "7" },
          { type: "roles", id: "9" }
        ]
      }
    }
  },
  {
    id: "9",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/9" },
    attributes: {
      name: "Launch campaigns",
      description: "Campaigns",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/9/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/9/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/9/relationships/roles",
          related: "http://localhost/v1/permissions/9/roles"
        },
        data: [{ type: "roles", id: "1" }, { type: "roles", id: "7" }]
      }
    }
  },
  {
    id: "10",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/10" },
    attributes: {
      name: "Create org-wide survey-related notifications",
      description: "Campaigns",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/10/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/10/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/10/relationships/roles",
          related: "http://localhost/v1/permissions/10/roles"
        },
        data: [{ type: "roles", id: "1" }, { type: "roles", id: "7" }]
      }
    }
  },
  {
    id: "11",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/11" },
    attributes: {
      name: "View Reports",
      description: "Reports",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/11/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/11/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/11/relationships/roles",
          related: "http://localhost/v1/permissions/11/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "4" },
          { type: "roles", id: "7" },
          { type: "roles", id: "10" }
        ]
      }
    }
  },
  {
    id: "12",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/12" },
    attributes: {
      name: "Modify prebuilt reports",
      description: "Reports",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/12/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/12/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/12/relationships/roles",
          related: "http://localhost/v1/permissions/12/roles"
        },
        data: [{ type: "roles", id: "1" }, { type: "roles", id: "7" }]
      }
    }
  },
  {
    id: "13",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/13" },
    attributes: {
      name: "Create new reports",
      description: "Reports",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/13/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/13/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/13/relationships/roles",
          related: "http://localhost/v1/permissions/13/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "4" },
          { type: "roles", id: "7" },
          { type: "roles", id: "10" }
        ]
      }
    }
  },
  {
    id: "14",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/14" },
    attributes: {
      name: "Share reports with rest of org",
      description: "Reports",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/14/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/14/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/14/relationships/roles",
          related: "http://localhost/v1/permissions/14/roles"
        },
        data: [{ type: "roles", id: "1" }, { type: "roles", id: "7" }]
      }
    }
  },
  {
    id: "15",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/15" },
    attributes: {
      name: "Share filters with rest of org",
      description: "Reports",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/15/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/15/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/15/relationships/roles",
          related: "http://localhost/v1/permissions/15/roles"
        },
        data: [{ type: "roles", id: "1" }, { type: "roles", id: "7" }]
      }
    }
  },
  {
    id: "16",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/16" },
    attributes: {
      name: "Create portfolio",
      description: "APT",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/16/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/16/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/16/relationships/roles",
          related: "http://localhost/v1/permissions/16/roles"
        },
        data: []
      }
    }
  },
  {
    id: "17",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/17" },
    attributes: {
      name: "Access all portfolios (at org)",
      description: "APT",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/17/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/17/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/17/relationships/roles",
          related: "http://localhost/v1/permissions/17/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "5" },
          { type: "roles", id: "7" },
          { type: "roles", id: "11" }
        ]
      }
    }
  },
  {
    id: "18",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/18" },
    attributes: {
      name: "Assign action plans",
      description: "APT",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/18/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/18/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/18/relationships/roles",
          related: "http://localhost/v1/permissions/18/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "5" },
          { type: "roles", id: "7" },
          { type: "roles", id: "11" }
        ]
      }
    }
  },
  {
    id: "19",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/19" },
    attributes: {
      name: "Work on action plans",
      description: "APT",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/19/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/19/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/19/relationships/roles",
          related: "http://localhost/v1/permissions/19/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "5" },
          { type: "roles", id: "7" },
          { type: "roles", id: "11" }
        ]
      }
    }
  },
  {
    id: "20",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/20" },
    attributes: {
      name: "Administer role templates for org",
      description: "Manage Users",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/20/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/20/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/20/relationships/roles",
          related: "http://localhost/v1/permissions/20/roles"
        },
        data: [{ type: "roles", id: "1" }, { type: "roles", id: "7" }]
      }
    }
  },
  {
    id: "21",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/21" },
    attributes: {
      name: "Add/edit/delete non org-admin users at org",
      description: "Manage Users",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/21/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/21/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/21/relationships/roles",
          related: "http://localhost/v1/permissions/21/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "6" },
          { type: "roles", id: "7" },
          { type: "roles", id: "12" }
        ]
      }
    }
  },
  {
    id: "22",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/22" },
    attributes: {
      name: "Add/edit/dete ORg Admin users at org",
      description: "Manage Users",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/22/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/22/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/22/relationships/roles",
          related: "http://localhost/v1/permissions/22/roles"
        },
        data: []
      }
    }
  },
  {
    id: "23",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/23" },
    attributes: {
      name: "Administer access patterns at org",
      description: "Manage Users",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/23/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/23/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/23/relationships/roles",
          related: "http://localhost/v1/permissions/23/roles"
        },
        data: [
          { type: "roles", id: "1" },
          { type: "roles", id: "6" },
          { type: "roles", id: "7" },
          { type: "roles", id: "12" }
        ]
      }
    }
  },
  {
    id: "24",
    type: "permissions",
    links: { self: "http://localhost/v1/permissions/24" },
    attributes: {
      name: 'Switch user ("Impersonate" another user)',
      description: "Manage Users",
      "is-active": null
    },
    relationships: {
      "role-permission-list": {
        links: {
          self:
            "http://localhost/v1/permissions/24/relationships/role-permission-list",
          related: "http://localhost/v1/permissions/24/role-permission-list"
        }
      },
      roles: {
        links: {
          self: "http://localhost/v1/permissions/24/relationships/roles",
          related: "http://localhost/v1/permissions/24/roles"
        },
        data: [{ type: "roles", id: "1" }, { type: "roles", id: "7" }]
      }
    }
  }
];

const result = roleTemplate.relationships.permissions.data.map(permission => {
  const permissionData = data.find(element => element.id === permission.id);
  return {
    id: permission.id,
    name: permissionData.attributes.name,
    description: permissionData.attributes.description
  };
});

console.log(result);