Hot-in-hot ajax response Uncaught Error: loadData only accepts array of objects or array of arrays (function given)

Tags: #<Tag:0x00007f8b1d734dd0>
#1

Im trying to fetch data from ajax using handsontable cell type:
data: ‘Cost_Code’,
type: ‘handsontable’,
handsontable: {
colHeaders: [‘CostCodeID’],
autoColumnSize: true,
data: getCostCode
},
strict: true

im calling the function getCostCode to populate the data

function getCostCode(query){

            $.ajax({
                url: 'offon.asmx/getCost_Code?query=' + query,
                dataType: 'json',
                type: 'GET',
                success: function (response) {
                    console.log(response);
                  return (response); // JSON.parse takes string as a argument
                  //return JSON.parse(response); tried this and getting the same error.
                }
            });

and the ajax data is:
[{“Cost_Code”:“01-001”},{“Cost_Code”:“01-00101”},{“Cost_Code”:“01-00155”},{“Cost_Code”:“33-331”},{“Cost_Code”:“33-33112”},{“Cost_Code”:“10-110”},{“Cost_Code”:“10-11010”},{“Cost_Code”:“10-430”},{“Cost_Code”:“10-43000”},{“Cost_Code”:“01-100”},{“Cost_Code”:“10-11001”},{“Cost_Code”:“10-11002”},{“Cost_Code”:“44-123”},{“Cost_Code”:“44-12312”},{“Cost_Code”:“11-100”},{“Cost_Code”:“11-10001”},{“Cost_Code”:“55-123”},{“Cost_Code”:“55-124”},{“Cost_Code”:“55-125”},{“Cost_Code”:“55-126”},{“Cost_Code”:“10-100”},{“Cost_Code”:“10-110”},{“Cost_Code”:“20-100”},{“Cost_Code”:“10-100”},{“Cost_Code”:“20-100”},{“Cost_Code”:“12-253”},{“Cost_Code”:“10-123”},{“Cost_Code”:“10-12345”},{“Cost_Code”:“10-10010”},{“Cost_Code”:“10-16055”},{“Cost_Code”:“10-16054”},{“Cost_Code”:“10-100”},{“Cost_Code”:“10-10012”},{“Cost_Code”:“01-55891”},{“Cost_Code”:“12-54123”},{“Cost_Code”:“10-56412”},{“Cost_Code”:“01-66678”},{“Cost_Code”:“10-33542”},{“Cost_Code”:“X1-12345”},{“Cost_Code”:“51-678”},{“Cost_Code”:“52-111”},{“Cost_Code”:“52-11211”},{“Cost_Code”:“10-119”},{“Cost_Code”:“XX-234”},{“Cost_Code”:“XX-XXX”},{“Cost_Code”:“XX-XX123”},{“Cost_Code”:“SS-SSS”},{“Cost_Code”:“SS-SSS01”},{“Cost_Code”:“12-231”},{“Cost_Code”:“12-24412”},{“Cost_Code”:“12-24442”},{“Cost_Code”:“01-00-00”},{“Cost_Code”:“01-01-00”},{“Cost_Code”:“01-01-01”},{“Cost_Code”:“02-00-00”},{“Cost_Code”:“02-01-00”},{“Cost_Code”:“02-01-04”},{“Cost_Code”:“02-01-05”},{“Cost_Code”:“02-05-00”},{“Cost_Code”:“02-05-02”},{“Cost_Code”:“03-00-00”},{“Cost_Code”:“03-03-00”},{“Cost_Code”:“03-03-01”},{“Cost_Code”:“10-002”},{“Cost_Code”:“01-001”},{“Cost_Code”:“01-45856”},{“Cost_Code”:“01-002”},{“Cost_Code”:“01-75896”},{“Cost_Code”:“01-003”},{“Cost_Code”:“01-01-01”}]

the problem:

handsontable.full.min.js:34 Uncaught Error: loadData only accepts array of objects or array of arrays (function given)

what am i missing?

#2

Hi @jojober

Without a demo, can be hard to find a solution.

I send you a React demo with fetching data - https://codesandbox.io/s/fetch-data-xhb8h
And you based on it extend to better reflect your needs and your issue.

Let me know if you need anything else.

#3

Hi Piotr.nowak,
handsontable cell type is working with variable

type: ‘handsontable’,
handsontable: {
colHeaders: [‘CostCodeID’],
autoColumnSize: true,
data: Variable_here
},
strict: true

if i put a function on data it throws that error.
type: ‘handsontable’,
handsontable: {
colHeaders: [‘CostCodeID’],
autoColumnSize: true,
data: function_here(){return Variable_here};
},
strict: true

#4

Could you prepare the whole version of your demo?

It is hard to say based on this sample of code.

#5

https://jsfiddle.net/jojober/aL6bx2ev/11/

data: function(process){
process(CostCode);
},

im trying to use AJAX to fetch data and fill handsontable cell however, it seems it doesn’t allow to put a function there.

#6

Data from AJAX request isn’t available right now.
This is future values when the request returns to us with values.

Handsontable, on the other hand, needs the data when trying to open the handsontable editor.
It operates on the synchronous data. Hence the error - Uncaught Error: loadData only accepts array of objects or array of arrays because these data isn’t achievable.

Most likely you have to load data and save it first and next to reference to it in the handsontable editor.

#7

hi piotr.
theres a question How can i use hot-in-hot like Autocomplete strict mode (Ajax) according to aleksandra, it can be done same as the autocomplete. just replace the source to data?
do you have a demo for this?

#8

This is a demo autocomplete with AJAX - https://handsontable.com/docs/7.4.2/demo-autocomplete.html#strict-ajax

Although we can think of cell {type: dropdown} as equivalent to cell {type: autocomplete, strict: true, filter: false}, autocomplete editor is open with the value from a cell, and asynchronous fetching data in the background after open, I suppose.
On the other hand, dropdown editor when is opened needs a data right now. Therefore it throws an error.

But you could try the same approach as an autocomplete demo has.
Please, let me know how it went.

#9

I was thinking about your case and maybe this approach will be suitable for you - https://codesandbox.io/s/fetch-the-source-for-dropdown-only-when-user-tries-to-open-the-particular-cell-dropdown-i6f4j?file=/src/index.js

It reacts on afterOnCellMouseDown and instead of an array you could use fetching data.

#10