Render list of project roles in <Table>

I am new to UI kit. I would like to render a <Table> using UI kit with <Row> for each project role of a project. I have fetched the project roles via REST API.

{
  "Administrators": "https://.../rest/api/3/project/MKY/role/10002",
  "Users": "https://.../rest/api/3/project/MKY/role/10001",
  "Developers": "https://.../rest/api/3/project/MKY/role/10000"
}

Because project roles is not an Array, but an object with keys and values for each role, the example given for <Table> in UI kit does not work, because map(…) function does not exist for role object.

Does anybody know, how to write the loop over the key/values of the role object for creating for each key/value in project roles object?

Best regards, Holger

I can’t speak to UI Kit capabilities because I don’t have any experience with those but you can usually iterate through objects in JS like this:
Object.keys(yourObject).map(…)

2 Likes

Thank you very much for the hint. Work’s perfectly fine. Object.keys for the project role names and Object.values for the self URLs of the roles.

{Object.keys(project.roles).map(role => (
<Row>
    <Cell>
        <Text>{role}</Text>
    </Cell>
</Row>
))}   
2 Likes