As I work on this program, my goal is to apply a function to an Array of objects to display rows with information from this group of users. However, TypeScript is throwing various errors when I try to access this information. I'm unsure of what I'm overlooking that would allow me to access the properties.
Here are the interfaces for my objects:
type TableData = Array<Row>;
interface Row {
id: string,
twilio_sid: string,
user_sid: string,
name: string,
activity_sid: string,
activity_name: string,
activity_last_updated: string,
role_id?: string,
queues?: string,
channels: [],
role?: string
}
Here is the map function I've attempted:
{(rowsPerPage > 0
? Object.entries(rows).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: rows
).map((user) => (
<TableRow key={user.id}>
<TableCell component="th" scope="row">
{user.name}
</TableCell>
<TableCell style={{ width: 160 }} align="left">
{user.role}
</TableCell>
<TableCell style={{ width: 160 }} align="left">
{user.activity_name}
</TableCell>
<TableCell style={{ width: 160 }} align="right">
Edit
</TableCell>
</TableRow>
))}
Previously, I did not use the Object.entries(obj) implementation, but I still encountered an error stating that slice was not a function on type Row.
Is there a way to continue using slice in this context?
Solution
Replacing Object.entries(obj) with Object.values(obj)
{(rowsPerPage > 0
? Object.values(users).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: Object.values(users)
)
.map((user: User) => (
<TableRow key={user.id.toString()}>
<TableCell component="th" scope="row">
<p>{user.name.toString()}</p>
</TableCell>
<TableCell style={{ width: 160 }} align="left">
<p>{user.role?.toString()}</p>
</TableCell>
<TableCell style={{ width: 160 }} align="left">
<p>{user.activity_name.toString()}</p>
</TableCell>
<TableCell style={{ width: 160 }} align="right">
<p></p>
</TableCell>
</TableRow>
))}
The implementation with Object.values(obj).slice() worked perfectly for my requirements.