CODEWITHSUNDEEP
javascriptjsonreactjsdatatablematerial-ui
SerbanRamon
SerbanRamon

Reputation: 107

Error when getting values from json to data table

I created an app in React and Flask that loads some json info into a data table. In the console.log I can see it but I didn`t manage to put it in the data table. I am using Material-UI and React

This is the code:

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '@material-ui/core/Button';
import { DataGrid } from '@material-ui/data-grid';




function App() {

 const columns = [
{ field: 'cnp', headerName: 'CNP', width: 130 },
{ field: 'cui', headerName: 'CUI', width: 130 },
{ field: 'mesaje', headerName: 'Mesaje', width: 130 },
{ field: 'serial', headerName: 'Serial',width: 130,},
{ field: 'titlu', headerName: 'Titlu', width: 130,},
];



useEffect(() => {
fetch('http://127.0.0.1:5000/formular',{
headers : { 
'Content-Type': 'application/json',
'Accept': 'application/json'
}

}).then(response =>
response.json().then(data =>{
console.log(data);

})
);
},[]);

const rows = [
{ id: 1, cnp: .data.cui, cui: data.cui, mesaje: data.mesaje, serial: data.serial, titlu: data.titlu 
},

];


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
return <div className="App">
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" ></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <h1>Lista mesaje</h1>
  <Button variant="contained" color="primary">
  refresh
</Button>
<br></br>

<div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
    </div>
  
  </div>;

}

export default App;

When I run the app the data loads in the console I can see the info but it doesn t load in the data-table. It`s my first time using React. The error is:

 ./src/App.js
 Line 38:19:  Parsing error: Unexpected token

 36 | 
 37 |   const rows = [
 > 38 |     { id: 1, cnp: .data.cui, cui: data.cui, mesaje: data.mesaje, serial: data.serial, titlu: 
 data.titlu },
    |                   ^
 39 | 
 40 |   ];
 41 |

Upvotes: 0

Views: 102

Answers (2)

Sam Gomena
Sam Gomena

Reputation: 1479

It looks like you're having issues with data not being defined while trying to access it (that's assuming you've resolved the invalid syntax of .data.cui).

Assuming it is an issue with data being undefined (because it's not in scope when trying to access it) you could try something like this:

import React, { useEffect, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import Button from "@material-ui/core/Button";
import { DataGrid } from "@material-ui/data-grid";

function App() {
  const columns = [
    { field: "cnp", headerName: "CNP", width: 130 },
    { field: "cui", headerName: "CUI", width: 130 },
    { field: "mesaje", headerName: "Mesaje", width: 130 },
    { field: "serial", headerName: "Serial", width: 130 },
    { field: "titlu", headerName: "Titlu", width: 130 },
  ];

  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const rawData = await fetch("http://127.0.0.1:5000/formular", {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      });
      const fetchedData = await rawData.json();
      setData(fetchedData);
    };

    fetchData();
  }, []);

  const rows = [
    {
      id: 1,
      cnp: data?.cui,
      cui: data?.cui,
      mesaje: data?.mesaje,
      serial: data?.serial,
      titlu: data?.titlu,
    },
  ];
}

Note that this does not perform any error handling, however as a first pass can hopefully get you going!

Upvotes: 0

Eranga Heshan
Eranga Heshan

Reputation: 5814

In your code,

const rows = [
{ id: 1, cnp: .data.cui, cui: data.cui, mesaje: data.mesaje, serial: data.serial, titlu: data.titlu 
},

You have added,

cnp: .data.cui

This is causing the issue. I believe it should be,

cnp: data.cui

Note: The extra .

Upvotes: 2

Related Questions