Assign array of strings from JSON to Handsontables object in javascript? - json

Question

I am trying to assign array of string to handsontables column as auto-complete. I am getting this JSON data from AJAX calls.
I am not getting to assign to source:. Please follow the code.
var loadBU = function(data) {
$.ajax({
url: "/EditInitiatives.svc/GetBUData",
data: "clientId=" + $value.val(),
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (res) {
data(res);
},
error: function (error) {
alert("Error: " + error.responseText);
}
});
};
$("#example2").handsontable({
data: getCarData(),
startRows: 7,
startCols: 4,
columns: [
{ data:'BusinessUnit',
type:'autocomplete',
source:loadBU(function(output){
var results = output.d
var arr = [], item;
for (var i = 0, len = results.length; i < len; i++) {
item = results[i];
arr.push([[item]]);
}
return arr;
}),
strict: true
},
]
});
It suppose to be like that EX: source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"],
I don't understand how to assign array to source.
Reference

Answer 1

Your "return arr;" does not return to the "source:", it returns to the "loadBU" function.
For example, you could do:
success: function (res) {
var arr = data(res);
},
This is why it is not being assigned.
Try making your Ajax call before $("#example2").handsontable({ and save it to someVariable, then set the source: someVariable
Depending on what your Ajax call returns, you may also need to make some manipulations. For example, I needed to loop through and load into an array:
function AppendToArray(ajaxValues, theArray) {
for (var i = 0; i < ajaxValues.length; i++) {
theArray.push('' + ajaxValues[i].Text + '');
}
}
I hope this helps

Answer 2

I use it like this:
var workers = null;
$.ajax({
url: siteUrl + "/Worker/Get",
dataType: 'json',
type: 'GET',
cache: false
})
.done(function (data) {
$("#worker-grid").handsontable({
data: data,
rowHeaders: true,
colHeaders: ["internal<BR />identification", "name", "mobile", "e-mail address", "national<BR />identification", "partner", "source"],
colWidths: [100, 150, 100, 250, 150, 150, 100],
columns: [
{ data: "intId" },
{ data: "name" },
{ data: "mobile" },
{ data: "mail" },
{ data: "extId" },
{
data: "partner", type: 'dropdown', source: function (query, process) {
$.ajax({
url: siteUrl + "/Partner/Get",
dataType: 'json',
type: 'GET',
cache: false
})
.done(function (data) {
var values = [];
for (i in data) values.push(data[i].name);
process(values);
});
}
},
{ data: "source" }
],
columnSorting: true,
minSpareRows: 1
});
workers = $("#worker-grid").data("handsontable");
});
The key in assigning to the source is the process parameter in the source function.
I would like to add however that this approach will be fetching data from the server with every use. My example above uses a dropdown which does not make sense.. But it's the correct approach when using with autocompletion.