Response from ajax.send is received but I get an uncaught exception

[Tomer Shaw]

Using the code below I succeed in sending an ajax get request and I can see the response in the network tab of chrome developer tools. However, I get the following exception when trying to call setDataManager

Uncaught DataManager: Invalid arguments

What am I doing wrong

import * as React from "react";

import { useEffect } from "react";

import { useState } from "react";

import {

  ScheduleComponent,

  ResourcesDirective,

  ResourceDirective,

  ViewsDirective,

  ViewDirective,

  Inject,

  TimelineViews,

  Resize,

  DragAndDrop,

  TimelineMonth,

  Day,

} from "@syncfusion/ej2-react-schedule";

import { extend } from "@syncfusion/ej2-base";

import { blockData } from "./datasource.json";

import { createElement } from "@syncfusion/ej2-base";

import { DropDownList } from "@syncfusion/ej2-react-dropdowns";

import { Ajax } from "@syncfusion/ej2-base";

const BlockEvents = () => {

  const [dataManager, setDataManager] = useState();

  useEffect(() => {

    const ajax = new Ajax("https://localhost:7014/reservations", "GET", true);

    ajax.send();

    ajax.onSuccess = function (value) {

      setDataManager(value);

      console.log(value);

    };

  }, []);

[Ram Raju Elaiyaperumal]

Hi Tomer Shaw,

The error message "Uncaught DataManager: Invalid arguments" suggests that the setDataManager function is receiving an argument that it doesn't expect. In this case, it's likely that the value returned by the ajax.onSuccess function is not in the correct format.

The setDataManager function expects an array of objects, but the ajax.onSuccess function might be returning a string. You can parse the string into a JSON object using JSON.parse(). 

useEffect(() => {

      const fetchData = async () => {

        var ajax = new Ajax("https://services.syncfusion.com/react/production/api/schedule", "GET", true);

        ajax.send().then(

          function (value) {

            if (typeof value === 'string') {

              try {

                const parsedValue = JSON.parse(value);

                setDataManager(parsedValue);

                console.log(parsedValue);

              } catch (error) {

                console.error('Error parsing API response:', error);

              }

            } else if (Array.isArray(value)) {

              setDataManager(value);

              console.log(value);

            } else {

              console.error('API response is not in the expected format:', value);

            }

          },

          function (reason) {

            console.log(reason);

          });

      }

      fetchData();

    }, []);

In this code, the JSON.parse() function is used to parse the API response if it's a string. If the parsing is successful, the parsed value is passed to the setDataManager function. If an error occurs during parsing, the error is logged to the console. If the API response is already an array, it's passed to the setDataManager function directly. If the API response is not in the expected format, an error message is logged to the console.

For your convenience we have prepared a stackblitz sample, kindly check on the sample: https://stackblitz.com/edit/scheduler-ajax-call

Regards,

Ram

[Tomer Shaw]

Hi, thank you! Now it works after I parse the json I  get the array of objects but there is a problem that it fails to

 change the dataManager , I would be happy if you could help me with this

This is the format I pass from my api

[

    {

        "Id": 1,

        "Subject": "",

        "StartTime": "2024-04-29T15:25:10:175Z",

        "EndTime": "2024-04-29T17:25:10:178Z",

        "IsAllDay": false,

        "IsBlock": false,

        "EmployeeId": 0,

        "CarType": "Ibiza",

        "RecurrenceRule": ""

    }

   {

        "Id": 2,

        "Subject": "",

        "StartTime": "2024-04-29T14:25:10:178Z",

        "EndTime": "2024-04-29T15:25:10:178Z",

        "IsAllDay": false,

        "IsBlock": false,

        "EmployeeId": 0,

        "CarType": "Ionic",

        "RecurrenceRule": ""

    }
]

[Ram Raju Elaiyaperumal]

Hi Tomer Shaw,

Based your query we checked the dataManager state variable and found that it is updating properly. The issue you're experiencing is due to the asynchronous nature of the setState function in React. When you call setDataManager(parsedValue), it schedules an update to the component state, but it doesn't immediately update the state. Therefore, when you log dataManager right after calling setDataManager, it logs the old state value because the state hasn't been updated yet.

If you want to see the updated state, you can use the useEffect hook and add dataManager as a dependency. This useEffect will run every time dataManager changes.

Here's how you can do it:

useEffect(() => {

  console.log(dataManager);

}, [dataManager]);

This useEffect hook will log the updated dataManager state every time it changes.

Kindly check on the stackBlitz sample for more reference : https://stackblitz.com/edit/scheduler-ajax-call

Regards,

Ram