jsGrid Loading Data using Option "pageLoading"

Could someone help me figure out how to get jsGrid to load my data (shown within the "Data:" section). I'm using the "pageLoading" option but it would appear the controller is not wanting to recognize my data.

Do I need to pull out the "data" from the response? If so, how would I do that?

jsGrid Data Format:


{
  data: [ { ..first item ...}, { ..second item..}, ...],
  itemsCount: n 
}

Data:


[{"ROW_NUMBER":1,"data":"[{\"data\":[{\"STUDENTPIDM\":1,\"STUDENTID\":111,\"STUDENTNAME\":\"Presley, Elvis\",\"AIDYEAR\":\"2425\",\"CATEGORY\":\"Deceased\",\"CATEGORIES\":null,\"COMMENTS\":\"Wish he was still here\"},{\"STUDENTPIDM\":2,\"STUDENTID\":222,\"STUDENTNAME\":\"Monroe, Marilyn\",\"AIDYEAR\":\"2324\",\"CATEGORY\":\"Deceased\",\"CATEGORIES\":null,\"COMMENTS\":\"Really miss her.\"},{\"STUDENTPIDM\":3,\"STUDENTID\":333,\"STUDENTNAME\":\"Dean, James\",\"AIDYEAR\":\"2425\",\"CATEGORY\":\"Deceased\",\"CATEGORIES\":null,\"COMMENTS\":\"Cool Actor\"}],\"itemcount\":\"3\"}]"}]

Controller Code:


controller: {
          loadData: function (filter) {
                      return fetch("/internal/dataPackage.XXXX")
                               .then(response => response.json()) 
                               .catch((error) => {
                                  toastr["error"]("Something went wrong.", "Error");
                               });

Error:

Uncaught (in promise) TypeError: this.data is undefined

Solution

From what I see, jsGrid expects to receive data in the format of an object -> keys, where the key data should hold an array. The data returned by the API is a string. By calling response.json(), we parse the first level of nesting — the first string, but not the nested string inside the data key. So, the result of response.json() will be an array, inside which there will be an object, and this object will have two keys: "ROW_NUMBER" and "data". The data should be an object, but since .json() only worked for the top level and not the nested properties, the value of the data key is a string. We need it to be an object, so it needs to be parsed.

let parsedData = JSON.parse(result[0].data);

Since result is an array, we must access its data by the [0] key, even though the array has only one element. The value at the .data key is a string, which we want to parse into an object.

Since JSON.parse(result[0].data) also doesn't return a simple JS object but an array containing an object with data, we also apply [0] to the parsed result (JSON.parse(result[0].data)[0]), which gives us the JS object with the data and itemcount keys directly into the parsedData variable.

After that, data will become an array, but itemcount will still be a string. Therefore, to convert it to a number, we use the parseInt() function.

return fetch("/internal/dataPackage.XXXX")
    .then(response => response.json())
    .then(result => {
        let parsedData = JSON.parse(result[0].data)[0];
    
        return {
            data: parsedData.data,
            itemsCount: parseInt(parsedData.itemcount, 10)
        };
    })
    .catch((error) => {
        toastr["error"]("Something went wrong.", "Error");
    });

EDIT:

if anyone wants to see the implementation you can find it here: https://codepen.io/Neriday/pen/azbyBoy

If anyone wants to read more about how everything works here, you can go to the discussion below, where the author of the question and I discussed everything in detail :)