Get json data to html table

Question

I have a json data from a mysql table that is queried from a php script. The json data is coming correctly like this:

{
"report": [{
    "Mes": "Abril",
    "Dia": "13",
    "Local": "Lisboa",

}]
}

I tried this code to get the data into a html table. But since i'm a noob I don't know why isn't working.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    <script>
    $.getJSON("http://ib.esy.es/_php/select_comissao1.php",
    function (data) {
        var tr = data.report
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].Mes + "</td>");
            tr.append("<td>" + data[i].Dia + "</td>");
            tr.append("<td>" + data[i].Local + "</td>");
            $('.table1').append(tr);
        }
    });
    </script>

    <table class="table1">
        <tr>
            <th>Mes</th>
            <th>Dia</th>
            <th>Hora</th>
        </tr>
    </table>

Can someone help me?

What's the specific issue that isn't working? Right now it's rather difficult to figure out what you're asking about. — Rushy Panchal
– Rushy Panchal, Commented Apr 17, 2016 at 22:25

Jonathan Michalik · Accepted Answer · 2016-04-17 23:55:17Z

1

Since you're saying the JSON is coming back, and assuming the object structure in the question is correct, a couple things stand out to me:

1) I don't understand why this line var tr = data.report is in the code. You're setting tr to your fetched data and then overwriting it with a jquery object in your loop.

2) The reason you're unable to get the data out of your JSON is that data is the root of your object. The data you're trying to write to the table is in the report property within the top-level data object. You can update your javascript to:

for (var i = 0; i < data.report.length; i++) {
  var tr = $('<tr/>');
  $(tr).append("<td>" + data.report[i].Mes + "</td>");
  $(tr).append("<td>" + data.report[i].Dia + "</td>");
  $(tr).append("<td>" + data.report[i].Local + "</td>");
  $('.table1').append(tr);
}

With the previous code, you were indexing into the data object which is not an array. This update makes sure the indexing is happening on the report property, which is an array.

Sample

$(document).ready(function() {
  // Using the JSON format from your question
  var data = {
    "report": [{
        "Mes": "Abril",
        "Dia": "13",
        "Local": "Lisboa",

    }]
  };

  // Loop through data.report instead of data
  for (var i = 0; i < data.report.length; i++) {
    var tr = $('<tr/>');
    
    // Indexing into data.report for each td element
    $(tr).append("<td>" + data.report[i].Mes + "</td>");
    $(tr).append("<td>" + data.report[i].Dia + "</td>");
    $(tr).append("<td>" + data.report[i].Local + "</td>");
    $('.table1').append(tr);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table1">
  <tr>
    <th>Mes</th>
    <th>Dia</th>
    <th>Hora</th>
  </tr>
</table>

edited Apr 17, 2016 at 23:55

answered Apr 17, 2016 at 22:43

Jonathan Michalik

1,54214 silver badges15 bronze badges

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

3 Comments

Jose Borges Over a year ago

Thank you for the reply, but no output is coming.

Jonathan Michalik Over a year ago

I've added a working sample to the answer for your reference. I'm not doing the AJAX call, but if you're getting the data back correctly, this should work

Jose Borges Over a year ago

But still no output, I guess the error is how push the data from url.

MParsons · Accepted Answer · 2016-04-17 22:36:45Z

0

You are very close. When sending async requests through JavaScript, you need to send the request to a path that is relative to your domain name. In this case, it should be /_php/select_comissao1.php. Just remove your domain name (http://ib.esy.es) from the request path.

index.php

<!DOCTYPE html>
<html>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
       /**
         * Replace "http://ib.esy.es/_php/select_comissao1.php" with a relative path.
         * 
         * In this case, it should be "/_php/select_comissao1.php"
         */
        $.getJSON("/_php/select_comissao1.php",
            function (data) {
                var tr = data.report
                for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + data[i].Mes + "</td>");
                    tr.append("<td>" + data[i].Dia + "</td>");
                    tr.append("<td>" + data[i].Local + "</td>");
                    $('.table1').append(tr);
                }
            });
    </script>

    <table class="table1">
        <tr>
            <th>Mes</th>
            <th>Dia</th>
            <th>Hora</th>
        </tr>
    </table>
</body>
</html>

Update

If your application is not running on http://ib.esy.es, you can execute a cross-domain ajax request with JSONP.

Example

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
    $.ajax({
        url: "http://ib.esy.es/_php/select_comissao1.php",
        type: "post",
        dataType: "jsonp", //jsonp allows cross-domain ajax requests.
        success: function (data) {
                var tr = data.report
                for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + data[i].Mes + "</td>");
                    tr.append("<td>" + data[i].Dia + "</td>");
                    tr.append("<td>" + data[i].Local + "</td>");
                    $('.table1').append(tr);
                }
        }
    });
</script>

<table class="table1">
    <tr>
        <th>Mes</th>
        <th>Dia</th>
        <th>Hora</th>
    </tr>
</table>
</body>
</html>

edited Apr 17, 2016 at 22:36

answered Apr 17, 2016 at 22:27

MParsons

2994 silver badges15 bronze badges

2 Comments

Jose Borges Over a year ago

Thank you for the reply, but no output is coming

MParsons Over a year ago

The code above is a complete example. It should work out of the box. If you are still running into problems, press F12 on your keyboard to open the developer tools. Then go to the console tab (sometimes also called JS Console). Let me know if you see any errors in the console.

Jose Borges · Accepted Answer · 2016-04-18 14:18:47Z

0

SOLUTION:

Finally the working code. It had to be the way I was pushing the data from php. The small/big difference was .then

$.getJSON("http://ib.esy.es/select_comissao1.php").then(function(data)
{console.log(data);

   var tr = data
    for (var i = 0; i < data.report.length; i++) {
    var tr = $('<tr/>');

    // Indexing into data.report for each td element
    $(tr).append("<td>" + data.report[i].Mes + "</td>");
    $(tr).append("<td>" + data.report[i].Dia + "</td>");
    $(tr).append("<td>" + data.report[i].Local + "</td>");
    $('.table1').append(tr);
    }

});

answered Apr 18, 2016 at 14:18

Jose Borges

3402 gold badges4 silver badges14 bronze badges

Collectives™ on Stack Overflow

Get json data to html table

3 Answers 3

3 Comments

Update

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Update

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related