DataView Slickgrid empty if data retrieved from database rethinkDB using io.socket

Question

I am trying to display my data from the database rethinkdb in DataView Slickgrid, but DataView is empty. For some reason it is not picking up the data and display it.

Here is my code:

jQuery(function($){
  var socket = io.connect();

  // Create the DataView.
  var dataView = new Slick.Data.DataView();
  var options = {
      editable: true,
      enableAddRow: false,
      enableCellNavigation: true,
      asyncEditorLoading: false,
      cellHighlightCssClass: "changed",
      cellFlashingCssClass: "current-server"
  };
  //Create columns
  var columns = [
    {id: "Name", name: "Name", field: "Name"},
    {id: "Quantity", name: "Quantity", field: "Quantity"},
    {id: "id", name: "id", field: "id"},

  ];

  // Pass it as a data provider to SlickGrid.

  var grid = new Slick.Grid("#myGrid", dataView, columns, options);


  var database=[];
  var object=[];

  socket.on('new message', function(data){
    for (var i = 0; i < data.length; i++) {
      object = data[i];
      database[i]={
        Name: object.Name,
        Quantity: object.Qauntity,
        id: object.id,
      };
    }
  });


  dataView.beginUpdate();
  dataView.setItems(database);
  dataView.endUpdate();

})

Could you please help me solve this issue? Thanks in advance!

Answer 1

var grid;


  var database=[];
  var object=[];

  socket.on('new message', function(data){
    for (var i = 0; i < data.length; i++) {
      object = data[i];
      database[i]={
        Name: object.Name,
        Quantity: object.Qauntity,
        id: object.id,
      };
    }
  dataView.beginUpdate();
  dataView.setItems(database);

grid = new Slick.Grid("#myGrid", dataView, columns, options);
dataView.endUpdate();
dataView.refresh();
grid.render();
  });

Now it works.