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

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.