display data from io.socket in Slickgrid

I receive data from io.socket and I would like to put the data in an array of object so this can be displayed in the slickgrid. For some reason the data pushed in the info is empty. Could somebody help me with this?

Thanks!!

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>SlickGrid</title>
  <link rel="stylesheet" href="/slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
  <link rel="stylesheet" href="/examples/examples.css" type="text/css"/>
</head>
<body>
<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:600px;height:500px;"></div>
    </td>
    <td valign="top">
      <h2>Demonstrates:</h2>
      <ul>
        <li>basic grid with minimal configurations</li>
      </ul>
        <h2>View Source:</h2>
        <ul>
            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
        </ul>
    </td>
  </tr>
</table>

<script src="/lib/jquery-1.7.min.js"></script>
<script src="/lib/jquery.event.drag-2.2.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/slick.core.js"></script>
<script src="./slick.grid.js"></script>

<script>
  var grid;
  var info;
  var info= [];
  var columns = [
    {id: "completed", name: "completed", field: "completed"},
    {id: "createdAt", name: "createdAt", field: "createdAt"},
    {id: "id", name: "id", field: "id"},
    {id: "title", name: "title", field: "title"},
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
  };


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

    socket.on('new message', function(data){

      $.each(data, function(idx, obj) {
        info.push(obj);
    });
  })
});

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


</script>
</body>
</html>

Solution

When you update the data behind slickgrid you need to tell the grid to redraw with the new data:

  socket.on('new message', function(data){
    $.each(data, function(idx, obj) {
      info.push(obj);
    });
    grid.invalidate(); // not 100% sure this is needed....
    grid.render();
  })