Jquery - Popular table using array

Question

I need to populate a table with objects received via database, but I am unable to pass the content:

<table id="grid-itens-nota" class="table table-bordered table-hover">
    <thead>
        <tr>                                
         <th>O.S.</th>
         <th>Cód Produto</th>
         <th>Descrição do Produto</th>
         <th>Sit. Trib.</th>
         <th>Unidade</th>
         <th>Valor Unitário</th>
         <th>Valor Total</th>
         <th>Custo Total</th>
         <th>N.C.M.</th>
       </tr>
    </thead>
</table>

The array is sent this way

With the JS:

populaAbaItens(produtos);

function populaAbaItens(result) {
   var table = $("#grid-itens-nota").DataTable({
      data: result,
   });
}

Answer 1

In your specific case, and with researches done the Jquery-datatables needs a array and not a objeto, then it is to make one more command line to transform the objeto in array.

Html:

<table id="grid-itens-nota" class="table table-bordered table-hover">
</table>

Javascript

function populaAbaItens(result) 
{
    var dataSet = [];
    $.each(result, function(index, data)
    {
       dataSet.push([
              data.almoxarifado,
              data.codigo,
              data.descricao,
              data.id, 
              data.ncm,
              data.notaRemessa,
              data.unidade,
              data.valorTotal,
              data.valorUnitario  
       ]);
    }
    var table = $("#grid-itens-nota").DataTable({
          data: dataSet,
          columns: [
                 { title: 'Almoxarifado' },
                 { title: 'Codigo' },
                 { title: 'Descricao' },
                 { title: 'Id' },
                 { title: 'Ncm' },
                 { title: 'Nota Remessa' },
                 { title: 'Unidade' },
                 { title: 'Valor Total' },
                 { title: 'Valor Unitario' }
          ]
    });
}

populaAbaItens(produtos);

Test now with this example, notice the changes in tag Table and in the Javascript.

---

Functional example:

$(document).ready(function() {    		
  var fs = function(){
    var dataObject = [
      {id:1,name:'A'},
      {id:2,name:'B'},
      {id:3,name:'C'}
    ];
    var dataSet = [];
    $.each(dataObject, function(index,data){
      dataSet.push([data.id,data.name]);
    });
    $('#example').DataTable({
      data: dataSet,
      columns: [
        { title: 'Id' },
        { title: 'Name' }
      ]
    });	
  };
  fs();  		
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.js"></script>	
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>    
<table id="example" class="display" width="100%"></table>