Dynamic data insertion via javascript object array

Tags: #<Tag:0x00007efc71aa4e88>
#1

I have a requirement where I have to dynamically push data. I have tried the same by using javascript array like this:

var dynamicData =[];

//Initializing dynamicData array through jstl 
<c:forEach var="innerList" items="${mylist}">
    <c:forEach var="obj" items="${innerList}">
     dynamicData[i]="${obj.val}";
     i++;
    </c:forEach>
</c:forEach>

var dynamicData1 =[];
 dynamicData1.push(dynamicData);
 var $container = $("#spreadsheet");
    var $console = $("#console");
    var $parent = $container.parent();
 $container.handsontable({
data: dynamicData1,
 });

And its working :slight_smile:

image.png1591×215 7.45 KB

Now my problem is that I want to dynamically add few columns with type ‘autocomplete’.
For that, I guess i need to create a javascript object and do the same job as I have done with normal javascript array. The only difference is that this time I have to work with javascript object array.

So I have tried like this but its not working:

    var dynamicData =[];
    <c:forEach var="innerList" items="${mylist}">
        <c:forEach var="obj" items="${innerList}">
          var datacell = new Object();
           datacell.type='autocomplete';
          datacell.source= ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"];
          dynamicData.push(datacell);
       </c:forEach>
    </c:forEach>
    var dynamicData1 =[];
     dynamicData1.push(dynamicData);

Kindly help.

#2

Hi @dasguptahirak

do you get any console errors or the table just does not load?
I have to say that I am not aware of that syntax and it makes it a little bit harder for me to understand.

As I assume you want to create the whole column structure, right?
You have the dynamicData which is the main array and you push objects (datacell) with the defined type and source. However, do you also set any data?
Sorry if the question may sound stupid? It’s hard to say anything while having one piece of code (not the working demo).

#3