How to fetch get data from API and render data in a table?-CodePudding

I'm trying to fetch data (array of objects) from API using a Token and show them in a table using Material-UI, but i'm getting this error below:

Uncaught (in promise) SyntaxError: Unexpected token 'A', "Access den"... is not valid JSON

GET https://api.factarni.tn/article 402

My API is tested successfully with responses that i need, but i'm struggle at showing theses data that i get from fetching method in the table.

import { DataGrid } from "@mui/x-data-grid";
import { userColumns} from "../../datatablesource";
import { Link } from "react-router-dom";
import AddBusinessIcon from "@mui/icons-material/AddBusiness";
import { useEffect, useState } from "react";

const Datatable = () => {
  const [data, setData] = useState({});

  const handleDelete = (id) => {
    setData(data.filter((item) => item.id !== id));
  };

  useEffect(() => {
    fetch("https://api.factarni.tn/article", {
      method: "GET",
      headers: {
        Authentication:
          "Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6ImFkMWIxOWYwZjU4ZTJjOWE5Njc3M2M5MmNmODA0NDEwMTc5NzEzMjMiLCJ0eXAiOiJKV1QifQ.eyJuYW1lIjoibW9oYW1lZCIsImlzcyI6Imh0dHBzOi8vc2VjdXJldG9rZW4uZ29vZ2xlLmNvbS9mYWN0YXJuaSIsImF1ZCI6ImZhY3Rhcm5pIiwiYXV0aF90aW1lIjoxNjYwNzIzNDA5LCJ1c2VyX2lkIjoiQ3hKejMwR1ExYlVLMVd0SjdDa1NVUzJ4NW5rMSIsInN1YiI6IkN4SnozMEdRMWJVSzFXdEo3Q2tTVVMyeDVuazEiLCJpYXQiOjE2NjA3MjM0MDksImV4cCI6MTY2MDcyNzAwOSwiZW1haWwiOiJpZHJpc3Ntb3VoYW1lZDg0MUBnbWFpbC5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiZmlyZWJhc2UiOnsiaWRlbnRpdGllcyI6eyJlbWFpbCI6WyJpZHJpc3Ntb3VoYW1lZDg0MUBnbWFpbC5jb20iXX0sInNpZ25faW5fcHJvdmlkZXIiOiJwYXNzd29yZCJ9fQ.XoDs7DEYWQm9AwWFEbR7CtKpgvTh_zH8E5V1e8nUp5OwQT3hjKMUBFRCa7p_v-1TXAF5VoSDGTt0vZRgtPj6u7mIzagi0CPkuQYVyUkhHo2wBOV-IHbCRTqg-M4d6WDQvfSp1C0OzUnEg8eduUr7F7znuLnAUZQKBZ_Xp9ogj8aAZo-R8Na0HE5h0L9fIslD9UFBj2192EVebpb2DJir16beotXpd04d_qC1WCrN3WMsWdvgl2BRrTiG6SkqqwZH1hZzNkajNtIrhpYLnSOBoE3SsiIczvctqexynxmlle7gWaBN22t1M3sk3NHCkdfkSrXRi3PIBr71qw2QWltkyA",
      },
    })
      .then((response) => response.json())
      .then((json) => console.log(json))
      .then((response) => setData(response));
  }, []);

  return (
    <div className="datatable">
      <DataGrid
        className="dataGrid"
        rows={data}
        columns={userColumns}
        pageSize={9}
        rowsPerPageOptions={[9]}
        checkboxSelection
      />
    </div>
  );
};

export default Datatable;

Testing API with postman:

[Method GET]:

[
    {
        "id": 5,
        "code": "t",
        "article": "tawla",
        "price": 10,
        "vat": null,
        "status": 1,
        "company_id": 12
    },
    {
        "id": 6,
        "code": "ttt",
        "article": "tawla",
        "price": 10,
        "vat": null,
        "status": 1,
        "company_id": 12
    }
]

CodePudding user response：

I can see the response being access denied. Since your API tests are a success. Then it could be that the request is missing a few headers. From what I see, you've added:

headers: {
        Authentication:
          "Bearer ...",
      }

You are using Authentication as a header; however, Many APIs use Authorization as the auth token. Try changing your headers to:

headers: {
        Authorization:
          "Bearer ...",
      }

CodePudding user response：

as mention by silencedogood

useEffect(() => {    fetch("https://api.factarni.tn/article", {
      method: "GET",
      headers: {
        Authentication:
          "Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6ImFkMWIxOWYwZjU4ZTJjOWE5Njc3M2M5MmNmODA0NDEwMTc5NzEzMjMiLCJ0eXAiOiJKV1QifQ.eyJuYW1lIjoibW9oYW1lZCIsImlzcyI6Imh0dHBzOi8vc2VjdXJldG9rZW4uZ29vZ2xlLmNvbS9mYWN0YXJuaSIsImF1ZCI6ImZhY3Rhcm5pIiwiYXV0aF90aW1lIjoxNjYwNzIzNDA5LCJ1c2VyX2lkIjoiQ3hKejMwR1ExYlVLMVd0SjdDa1NVUzJ4NW5rMSIsInN1YiI6IkN4SnozMEdRMWJVSzFXdEo3Q2tTVVMyeDVuazEiLCJpYXQiOjE2NjA3MjM0MDksImV4cCI6MTY2MDcyNzAwOSwiZW1haWwiOiJpZHJpc3Ntb3VoYW1lZDg0MUBnbWFpbC5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiZmlyZWJhc2UiOnsiaWRlbnRpdGllcyI6eyJlbWFpbCI6WyJpZHJpc3Ntb3VoYW1lZDg0MUBnbWFpbC5jb20iXX0sInNpZ25faW5fcHJvdmlkZXIiOiJwYXNzd29yZCJ9fQ.XoDs7DEYWQm9AwWFEbR7CtKpgvTh_zH8E5V1e8nUp5OwQT3hjKMUBFRCa7p_v-1TXAF5VoSDGTt0vZRgtPj6u7mIzagi0CPkuQYVyUkhHo2wBOV-IHbCRTqg-M4d6WDQvfSp1C0OzUnEg8eduUr7F7znuLnAUZQKBZ_Xp9ogj8aAZo-R8Na0HE5h0L9fIslD9UFBj2192EVebpb2DJir16beotXpd04d_qC1WCrN3WMsWdvgl2BRrTiG6SkqqwZH1hZzNkajNtIrhpYLnSOBoE3SsiIczvctqexynxmlle7gWaBN22t1M3sk3NHCkdfkSrXRi3PIBr71qw2QWltkyA",
      },
    })
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

Also Change initial value of data to empty array Like this;

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