problems filling table with api data

[Ada-Mustafa]

Im trying to insert data from an api but only get the first row. How to proceed here?

`

Nome Sexo Apelido {People.attributes.map((details) => ( x.displayName === "First name" )[0].value, lastName: details.attributes.filter( (x) => x.displayName === "Last name" )[0].value, country: details.attributes.filter( (x) => x.displayName === "Country" )[0].value}, ]}> r.firstName}/> r.lastName}/> r.country}/> ))} `

[dmk99]

Hi,

Looking at the code above, you would need to map the People.attributes into the object. So something like

const peopleList = People.attributes.map((details) => ({
firstName:  details.attributes.filter(
                    (x) => x.displayName === "First name"
 )[0].value, 
 lastName: details.attributes.filter(
                    (x) => x.displayName === "Last name"
)[0].value, 
country: details.attributes.filter(
                    (x) => x.displayName === "Country"
)[0].value
}));

You would then need to pass this array in to the data property for the parent Table. Remove data from TableBody. Then you should hopefully see data being displayed.

e.g.

<Table data={peopleList}>
                <TableHeader>
                    <TableCell>
                        Nome
                    </TableCell>
                    <TableCell>
                      Sexo
                    </TableCell>

                    <TableCell>
                        Apelido
                    </TableCell>

                </TableHeader>
                <TableBody>
                    <DataTableCell getContent={(r) => r.firstName}/>
                    <DataTableCell getContent={(r) => r.lastName}/>
                    <DataTableCell getContent={(r) => r.country}/> 
                </TableBody> 
</Table>