Build dynamic table in HTML from JSON data using Datatables

Question

I need to build a table based on a json returned by a php script using datatables plugin. My code is below:

HTML:

<table id="doentes" class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Id</th>
      <th>Pedidos (Canal 1)</th>
      <th>Pedidos (Canal 2)</th>
      <th>Pedidos (Canal 3)</th>
      <th>Preço</th>
      <th>Frete</th>
      <th>Prazo</th>
      <th>Pageviews</th>
      <th>Abandonos</th>
    </tr>
  </thead>
  <tbody>
     <tr>
      <td>Id</td>
      <td>Pedidos (Canal 1)</td>
      <td>Pedidos (Canal 2)</td>
      <td>Pedidos (Canal 3)</td>
      <td>Preço</td>
      <td>Frete</td>
      <td>Prazo</td>
      <td>Pageviews</td>
      <td>Abandonos</td> 
     </tr>
  </tbody>
</table>

Javascript:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>     
<script>
  $(document).ready(function() {
      $('#doentes').DataTable({
        "ajax" :  "functions/diagnosticoGeral.php",
        "columns" : [ 
          { 
              "data" : "id"
          }, {
            "data" : "pedidos0"
          }, {
            "data" : "pedidos1"
          }, {
            "data" : "pedidos2"
          }, {
            "data" : "preco"
          }, {
            "data" : "frete"
          }, {
            "data" : "prazo"
          }, {
            "data" : "pageviews"
          }, {
            "data" : "abandonos"
          }]
      });
  });

  </script>

sample of php json output:

[
{ 
"id": "159830",
"pedidos0": "Outros Canais: 0% da queda, com variação de 100% em relação aos  
últimos ciclos",
"pedidos1": "CNova: 0% da queda, com variação de -20% em relação aos últimos 
ciclos",
"pedidos2": "MadeiraMadeira: 0% da queda, com variação de -23% em relação 
aos últimos ciclos",
"preco": "Sem variação significativa",
"pageviews": "-9 % em relação aos últimos ciclos",
"frete": [
"-8 % em relação aos últimos ciclos",
"SP: 9% em relação aos últimos ciclos"
],
"prazo": [
"14% em relação aos últimos ciclos",
"SP: 10% em relação aos últimos ciclos"
],
"abandonos": "-4 % em relação aos últimos ciclos"
},
{
"id": "159831",
"pedidos0": "Outros Canais: 0% da queda, com variação de 0% em relação aos 
últimos ciclos",
"pedidos1": "CNova: 0% da queda, com variação de 0% em relação aos últimos 
ciclos",
"pedidos2": "Walmart: 0% da queda, com variação de -25% em relação aos 
últimos ciclos",
"preco": "Sem variação significativa",
"pageviews": "-31 % em relação aos últimos ciclos",
"frete": [
"-100 % em relação aos últimos ciclos",
"SP: -100 % em relação aos últimos ciclos"
],
"prazo": [
"-100 % em relação aos últimos ciclos",
"SP: -100 % em relação aos últimos ciclos"
],
"abandonos": "-21 % em relação aos últimos ciclos"
},
{
"id": "161138",
"pedidos0": "Outros Canais: 0% da queda, com variação de 0% em relação aos 
últimos ciclos",
"pedidos1": "CNova: 0% da queda, com variação de 0% em relação aos últimos 
ciclos",
"pedidos2": "B2W: 0% da queda, com variação de -57% em relação aos últimos 
ciclos",
"preco": "12% em relação aos últimos ciclos",
"pageviews": "-55 % em relação aos últimos ciclos",
"frete": [
"23% em relação aos últimos ciclos",
"SP: 19% em relação aos últimos ciclos"
],
"prazo": [
"-3 % em relação aos últimos ciclos",
"SP: -14 % em relação aos últimos ciclos"
],
"abandonos": "-68 % em relação aos últimos ciclos"
}
]

It only returns the empty table, with an error from the browser:

jquery.dataTables.min.js:48 Uncaught TypeError: Cannot read property 'length' of undefined
    at jquery.dataTables.min.js:48
    at i (jquery.dataTables.min.js:35)
    at Object.success (jquery.dataTables.min.js:35)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)

I tried following some examples but my knowledge in javascript is limited. I also didn't find any questions here that fit my problem. Any guidance would be much appreciated.

A. Iglesias · Accepted Answer · 2017-09-21 07:15:36Z

1

You don't have "data" defined in your JSON response. You should have...

{
  "data": [
    { 
        "id": "159830"
        "pedidos0": "...",
        "pedidos1": "...",
        "pedidos2": "...",
        "preco": "Sem variação significativa",
        "pageviews": "-9 % em relação aos últimos ciclos",
        "frete": [
            "-8 % em relação aos últimos ciclos",
            "SP: 9% em relação aos últimos ciclos"
        ],
        "prazo": [
            "14% em relação aos últimos ciclos",
            "SP: 10% em relação aos últimos ciclos"
        ],
        "abandonos": "-4 % em relação aos últimos ciclos"
    },
    {
        "id": "159831",
        "pedidos0": "...",
        "pedidos1": "...",
        "pedidos2": "...",
        "preco": "Sem variação significativa",
        "pageviews": "-31 % em relação aos últimos ciclos",
        "frete": [
            "-100 % em relação aos últimos ciclos",
            "SP: -100 % em relação aos últimos ciclos"
        ],
        "prazo": [
            "-100 % em relação aos últimos ciclos",
            "SP: -100 % em relação aos últimos ciclos"
        ],
        "abandonos": "-21 % em relação aos últimos ciclos"
    },
    {...},
    {...},
  ]
}

I hope it helps

answered Sep 21, 2017 at 7:15

A. Iglesias

2,6752 gold badges12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Erick Skrobot Over a year ago

Wow I was close. That solved my problem, thanks a lot!

Collectives™ on Stack Overflow

Build dynamic table in HTML from JSON data using Datatables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related