Display JSON Response into rows of Datatable in React

Question

I am fetching data from a backend endpoint and I want to display this data by using a component I found that takes as props the columns and the rows. I went ahead and created the columns(header) but I don't know how to handle the json response as it's array of objects.

Before I used a for the columns and with the map function to sort the data to rows. The objects have more than just 6 columns but I only wanted to display the important ones.

Take a look in my code to see the previous method I used and please provide any help how I can do it with the new way.

const Trademarks = () => {
    const navigate = useNavigate();
    const user = useUser();
    const [trademarks, setTrademarks] = useState(null);

    useEffect(() => {
        obtainFromServer("api/trademarks", "GET", user.jwt).then(trademarksData => {
            setTrademarks(trademarksData);
        });
        if(!user.jwt){
            navigate("/login");
        }
    },[user.jwt]);

    
    const trademarksColumns = {
        columns: [
            { Header: "action", accessor: "id", width: "7%" },
            { Header: "cy number", accessor: "cynumber", width: "13%" },
            { Header: "ir number", accessor: "irnumber", width: "16%" },
            { Header: "Date Publish", accessor: "dtpublish", width: "15%" },
            { Header: "Status", accessor: "status", width: "15%"  },
            { Header: "Notes", accessor: "notes" },
            
        ],
    }
    const trademarksRows = {
        rows: [
            {
                id: "i",
                cynumber: "i",
                irnumber: "i",
                dtpublish: "i",
                status: "i",
                notes: "i",                
            },
            {
                id: "ai",
                cynumber: "ai",
                irnumber: "ai",
                dtpublish: "ai",
                status: "ai",
                notes: "ai",                
            }

        ],
    }
    console.log(trademarks);

    function getRolesFromJWT(){
        if(user.jwt){
        const decodedJwt = jwt_decode(user.jwt);
        return decodedJwt.authorities;
        }
        return [];
    }
    function LogOut (){
        fetch("/api/auth/logout").then((response) => {
            if (response.status === 200) {
              user.setJwt(null);
            //   navigate(0);
            }
        });
    }

    return (
        <>
            <Box my={3}>
            <Table striped bordered hover variant="dark">
                <thead>
                    <tr style={{ textAlign: 'center' }}>
                        <th>Action</th>
                        <th>CY Number</th>
                        <th>IR Number</th>
                        <th>Date Publish</th>
                        <th>Status</th>
                        <th>Notes</th>
                    </tr>
                </thead>
                <tbody>
                {trademarks ? trademarks.map(trademark => 
                    <tr key={trademark.id} style={{ textAlign: 'center' }}>

                        <td><Link to={`/trademarks/${trademark.id}`}>View/Edit</Link></td>
                        <td>{trademark.cynumber}</td>
                        <td>{trademark.irnumber}</td>
                        <td>{trademark.dtpublish}</td>
                        <td>{trademark.status}></td>
                        <td>{trademark.notes}</td>

                    </tr>) : <></>}
                </tbody>
            </Table>

            </Box>
            <Box pt={6} pb={3}>
                <Card>
                <Box p={3} lineHeight={1}>
                    <Typography variant="h5" fontWeight="medium">
                    Datatable Search
                    </Typography>
                </Box>
                <DataTable columnsTitle={trademarksColumns} rowsData={trademarksRows} canSearch />
                </Card>
            </Box>
            </>
    );
};

export default Trademarks;

Basically, I need to put the JSON response but only the needed columns inside the constant trademarksRows inside the rows array. Lastly for each row previously I included a button so the user can navigate to the trademark by the id. What's the best way to solve my problem and how can I do that?

Answer 1

Finally, figure it out. This is how I did it.

    const [trademarksRows, setTrademarksRows] = useState({
        rows: [],
    })

    useEffect(() => {
        obtainFromServer("api/trademarks", "GET", user.jwt).then(trademarksData => {
            setTrademarks(trademarksData);
            let rowsTr = trademarksData.map(trademarkData => ({
                id: <MDButton color="secondary" onClick={() => (navigate(`/trademarks/${trademarkData.id}`))}>View/Edit</MDButton>,
                cynumber: trademarkData.cynumber,
                irnumber: trademarkData.irnumber,
                dtpublish: trademarkData.dtpublish,
                status: <StatusBadge text={trademarkData.status}/>,
                notes: trademarkData.notes,                
            }));
            setTrademarksRows({rows:rowsTr});
        });
    },[]);