jQuery AJAX Not Working When Loading Data to Table

Tags: #<Tag:0x00007efc6b578f50>
#1

Hello. I’m new to HOT and am trying to reproduce the “Saving Data” example in your documentation at the link below.

https://handsontable.com/docs/saving-data/#overview

However, instead of using the “ajax” method provided in your code to load data into the table, I’m trying to use the jquery “$.ajax” method instead and it is returning the error:

“unexpected token u in json at position 0 at json.parse (anonymous)”

I understand what the error is, but do not understand why the error is occurring.

Here is the snippet from your code which is referring to the ajax function in the code:

ajax(’/docs/11.1/scripts/json/load.json’, ‘GET’, ‘’, res => {
const data = JSON.parse(res.response);
hot.loadData(data.data);
exampleConsole.innerText = ‘Data loaded’;
});

Here is what I’m trying to use instead which is using jQuery AJAX:

$.ajax({url: ‘data/load/load.json’, method: ‘GET’, dataType: ‘json’, success: res => {
const data = JSON.parse(res.response);
hot.loadData(data.data);
exampleConsole.innerText = ‘Data loaded’;;
}});

There error is in “JSON.parse(res.response)”. It usually means that the JSON being sent to that method is undefined or in the wrong format, but I am using the same exact data in your code (at https://handsontable.com/docs/11.1/scripts/json/load.json and it’s in a proper JSON format.

I’ve tried multiple things and read through your forum and others and have not had any luck.

Any ideas?

#2

Hi @ptownbro

It looks that there is a problem with path to the JSON files in our example. I’ve already reported the issue here:

Also, I was able to find the information that it might be JSFiddle related issue with getting the JSON files from outside source. I’ll try to confirm it and get back to you tomorrow with an update.

#3

Thanks for the response. Wasn’t quite my issue. My issue was related how to load using jQuery version of AJAX.

But… with the issue you described…

Don’t you have to use
https://handsontable.com/docs/11.1/scripts/json/

Instead of
/docs/11.1/scripts/json/

For example these are the actual locations of the json file referenced in the code:
https://handsontable.com/docs/11.1/scripts/json/load.json
https://handsontable.com/docs/11.1/scripts/json/save.json

#4

Hi @ptownbro

I noticed that in your jQuery version you are importing JSON file from local folder. If you want to do this with jQuery you would need to use this method $.getJSON() to make it work.

As for the actual files locations, you are correct. However, even if you change the wrong URLs in JSFiddle it still won’t work, neither with jQuery or pure AJAX request because of the CORS policy blocking the files in JSFiddle.

#5

Thank you for the response. I figured out the issue. The fix was to just not parse the data. It will load without it.

So instead of using “const data = JSON.parse(res.response)” use “const data = res.response” as shown below:

$.ajax({url: ‘data/load/load.json’, method: ‘GET’, dataType: ‘json’, success: res => {
const data = res.response;
hot.loadData(data.data);
exampleConsole.innerText = ‘Data loaded’;;
}});

#6