build table with react table with api

Question

good morning colleagues, I was building a table with data that is brought from after consuming the api, the problem is that this data does not have the normal structure of a json.

The file that the server gives me is this:

{
  "Sensor_Id": "1",
  "Temperature": "35.27",
  "Humidity": "61.4"
}

As you can see, it does not have the brackets ([]), that is why it does not read the variables when building the table, here I consume the api:


export function Sensores(props) {
  const [sensores, setSensores] = useState([]);

  const fetchSensores = async () => {
    const response = await axios
      .get("https://my-json-server.typicode.com/ijrios/prueba2/sensores")
      .catch((err) => console.log(err));

    if (response) {
      const sensores = "["+response.data+"]";

      console.log("Sensores: ", sensores);
      setSensores(sensores);
    }

  };

and here I build the columns:


const columns = useMemo(
    () => [
      {
        Header: "Id",
        accessor: "Sensor_Id",
      },
      {
        Header: "Temperatura",
        accessor: "Temperature",
      },
      {
        Header: "Humedad",
        accessor: "Humidity",
      },
    ],
    []
  );

  const DatoSensores = useMemo(() => [...sensores], [sensores]);

  const tableInstance = useTable(
    {
      columns: columns,
      data: DatoSensores,
    }
  );

As the file that arrives is a json with a different structure, it does not write any data to the table, I need help to be able to read data and display it on the screen, thx u.

0stone0 · Accepted Answer · 2022-04-22 12:11:46Z

1

const sensores = "["+response.data+"]";

This generates a string with [ 's around response.data

React Tables needs a regular array as data source, so lets make one;

const sensores = [ response.data ];

answered Apr 22, 2022 at 12:11

0stone0

45.5k6 gold badges53 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jose Alexander Rios 3Palacios Over a year ago

It worked, thank you. I need practice!

Collectives™ on Stack Overflow

build table with react table with api

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related