Attempting to slice a javascript object inside of table pagination but unable to access properties o-CodePudding

Within this program, I'm trying to map a function across an Array of objects in order to render rows with information from this Array of users. When doing so, TypeScript is giving me a variety of issues when trying to access this information. I can't see what it is I'm missing that would allow me to access the properties.

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
}

Attempted map thus far:

 {(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>
                    ))}

I previously was not using the Object.entries(obj) implementation but this still threw an error stating that slice was not a function on this type Row.

Does an implementation exist where I can still use slice in this regard?

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 above implementation with Object.values(obj).slice() worked perfectly for my needs.

CodePudding user response：

Object.entries returns an array of key-value pairs which are stored in arrays like [key, value]. What you'd probably want is the Object.values() function (which returns only the values, which you're interested in). https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/values