Estoy obteniendo los datos de un fichero JSON con la información y he creado una función para obtener los datos de dicho fichero JSON. Hasta aquí bien, pero quiero poner estos datos en un DataGrid de MUI, que me pide rows y columns, las columnas las puse a mano pero los rows quiero rellenarlo automáticamente con los datos que obtengo del fichero JSON.
Código función:
function Productos() {
const [data, setData] = useState([]);
const getData = () => {
fetch("dadesBD.json", {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
})
.then(function (response) {
//console.log(response);
return response.json();
})
.then(function (myJson) {
// console.log(myJson);
setData(myJson);
});
};
useEffect(() => {
getData();
}, []);
return (
{data && data.length > 0 && data.map((item) => (
`
id:${item.id}
nombre:${item.nombre}
`
))}
);
}
Lo que quiero llegar a conseguir es una const así:
const rows = [
{
id: 1,
nombre: "Jose",
},];
Para poder pasarle al componente:
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
checkboxSelection
disableSelectionOnClick
/>
dadesBD.json
?{ id: 1, nombre: "Jose"}
y las columnas del Grid se llaman de la misma manera, no tiene porque hacerle el.map()
.