How to access payload properties from API response using axios and React

Question

I'm trying to access a nested object from an API response using axios. I will be using the data to chart a Bar Chart using ChartJS. Below is my code.

import { ChartContainer, Container } from "../styled/BarChart";
import {
  Chart as ChartJS,
  BarElement,
  LinearScale,
  CategoryScale,
} from "chart.js";
import { Bar } from "react-chartjs-2";
import { useEffect, useState } from "react";
import api from "../pages/api/posts";

ChartJS.register(BarElement, LinearScale, CategoryScale);

const BarChart = () => {
  const [chart, setChart] = useState<any[]>([]);
  const [load, setLoad] = useState<any[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await api.get(
          "/careRecipient/ad3512a6-91b1-4d7d-a005-6f8764dd0111/events/water_intake"
        );

        setChart(response.data);
        setLoad(Object.keys(JSON.parse(response.data.payload))); //FIX
        console.log(response.data);
      } catch (err) {
        // Not in the 200 response range
        let errorMessage = "Failed!";
        if (err instanceof Error) {
          errorMessage = err.message;
        }
        console.log(errorMessage);
      }
    };

    fetchData();
  }, []);

  const data = {
    labels: chart?.map((data) => data.timestamp),
    datasets: [
      {
        label: `${chart?.length} Fluid Intake Observations`,
        data: load?.map((data) => data.volume_ml), //NOT WORKING
        backgroundColor: [
          "rgba(255, 99, 132, 0.2)",
          "rgba(54, 162, 235, 0.2)",
          "rgba(255, 206, 86, 0.2)",
          "rgba(75, 192, 192, 0.2)",
          "rgba(153, 102, 255, 0.2)",
          "rgba(255, 159, 64, 0.2)",
        ],
        borderColor: [
          "rgba(255, 99, 132, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
          "rgba(255, 159, 64, 1)",
        ],
        borderWidth: 1,
      },
    ],
  };

  const options = {
    maintainAspectRatio: false,
    scales: {
      y: {
        beginAtZero: true,
      },
    },
    legend: {
      labels: {
        fontSize: 26,
      },
    },
  };

  return (
    <Container>
      <ChartContainer>
        <Bar data={data} options={options} height={400} />
      </ChartContainer>
    </Container>
  );
};

export default BarChart;

The response I am Receiving is in this format and I am receiving multiple of those:

RowDataPacket {
    payload: '{"id": "fc9ec0cc-d7a5-40b9-a37e-8c72616d3bed", "note": "", "visit_id": "8e1dd351- 
    9178-45d1-be2d-673692c2e6ac", "timestamp": 
    "2019-04-26T12:42:07.088Z", "volume_ml": 400, 
    "event_type": "water_intake", "caregiver_id": "b5583964-a87f-4f29-91eb-e1996bb54ea4", 
    "care_recipient_id": "ad3512a6-91b1-4d7d-a005-6f8764dd0111"}',
    alert_id: null,
    task_instance_id: null,
    visit_id: '8e1dd351-9178-45d1-be2d-673692c2e6ac',
    caregiver_id: 'b5583964-a87f-4f29-91eb-e1996bb54ea4',
    payload_as_text: '{"id": "fc9ec0cc-d7a5-40b9-a37e-8c72616d3bed", "note": "", "visit_id": 
    "8e1dd351-9178-45d1-be2d-673692c2e6ac", "timestamp": "2019-04-26T12:42:07.088Z", "volume_ml": 
    400, "event_type": "water_intake", 
    "caregiver_id": "b5583964-a87f-4f29-91eb-e1996bb54ea4", "care_recipient_id": "ad3512a6-91b1- 
    4d7d-a005-6f8764dd0111"}',
    rejected_event_id: null,
    observation_event_id: null,
    timestamp: '2019-04-26T12:42:07.088Z',    
    id: 'fc9ec0cc-d7a5-40b9-a37e-8c72616d3bed',
    event_type: 'water_intake',       
    care_recipient_id: 'ad3512a6-91b1-4d7d-a005-6f8764dd0111'
  }

My problem is that I need to access all the payload properties from the multiple objects I receive in the response and to be able to return the property volume_ml from inside those payload properties, but I can't seem to figure out where I am going wrong in trying to access that data. One possible problem I thought was the case is that payload has a string as a value and I would need to transform it to a JSON object, so I've attempted to do that using load but I couldn't get that to work.

Answer 1

Turned out it was just a silly mistake in the way I was trying to access that property. I didn't need load. All I had to do was parse the payload properties within the map and then ask for .volume_ml. So I had to get rid of load entirely and change this:

data: load?.map((data) => data.volume_ml), //NOT WORKING

To using just chart like this:

data: chart?.map((data) => JSON.parse(data.payload).volume_ml)