0

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
  />
4
  • Podes agregar un ejemplo de la data que contiene dadesBD.json?
    – maxpsz
    Commented el 13 feb. 2022 a las 22:50
  • [ { 1, "Jose", }, { 2, "Juan", },]
    – Azumay404
    Commented el 14 feb. 2022 a las 9:19
  • Si ya estas recibiendo los items con ese formato, es decir, que el array contiene objectos así: { id: 1, nombre: "Jose"} y las columnas del Grid se llaman de la misma manera, no tiene porque hacerle el .map().
    – maxpsz
    Commented el 14 feb. 2022 a las 13:46
  • Mira este ejemplo: codesandbox.io/s/material-ui-datagrid-s2eyd?file=/src/App.js
    – maxpsz
    Commented el 14 feb. 2022 a las 13:59

1 respuesta 1

1

Ya lo solucione! Dejo mi ejemplo por si alguien le sirve de ayuda

https://codesandbox.io/s/hungry-wilbur-hpx48?file=/src/components/EjemploFetch/FetchDB.js

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.