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

Question

所以我有一个数据列表来自我的 redux-store 我有 JSON.stringified 所以我可以阅读它。我想过滤 permissions 的列表，它只为我提供 id 以获得每个权限的 name，所以我可以在我的 [=18] 中显示 Permission Name =].

这是一个示例项目：

{
    "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。所以我想通过使用 id 过滤器检索每个 permission 的名称。

Answer 1

您的客户端数据包含一个link来获取您想要的数据。

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 请求应该 return 属于您的角色模板的所有权限，包括 name 和 description.

Answer 2

您可以在包含 name 和 description.

的第二个请求的结果中使用 map on all the elements in the permissions data and find 数据中的元素

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

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

How do I filter a list of data by id for my react component to get the name of the object

javascript

json

reactjs

json-api

react-redux