Convert JSON to HTML Table

Question

I have tried to convert my JSON from URL to HTML Table, but the result is the HTML table went blank.

I stored the JSON file in http://bayuyanuargi.000webhostapp.com/myfile.json, below is the code I used:

<html>
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
  </script>
  <script>
    $(function() {

      var result = [];
      var dmJSON = "http://bayuyanuargi.000webhostapp.com/myfile.json?callback=?";
      $.getJSON(dmJSON, function(data) {
        $.each(data.result, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.address.name + "</td>" + "<td>" + f.address.street + "</td>" + "</tr>"
          $(tblRow).appendTo("#resultdata tbody");
        });

      });

    });
  </script>
</head>
<body>
  <div class="wrapper">
    <div class="profile">
      <table id="resultdata" border="1">
        <thead>
          <th>Name</th>
          <th>Street</th>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

Any error in browser console? Maybe something like "This request has been blocked; the content must be served over HTTPS" — palaѕн
– palaѕн, Commented Mar 18, 2018 at 5:05
@palash That's it, I tried just pasting the JSON and it worked. — JackHasaKeyboard
– JackHasaKeyboard, Commented Mar 18, 2018 at 5:09
var tblRow = "<tr>" + "<td>" + f.address.name + "</td>" + "<td>" + f.address.street + "</td>" + "</tr>" in this line address refers to — Anburaj_N
– Anburaj_N, Commented Jul 5, 2018 at 13:48

acdcjunior · Accepted Answer · 2018-03-18 05:09:35Z

The presence of ?callback= makes jQuery perform the request as JSONP. And your page returns JSON only, not JSONP.

From jQuery.getJSON() docs:

JSONP If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

Solution: Remove the callback=? from the URL.

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

  <script>
    $(function() {
      var CORS = "https://cors-anywhere.herokuapp.com/" // for testing purposes, only
      
      var result = [];
      var dmJSON = CORS + "https://bayuyanuargi.000webhostapp.com/myfile.json";
      $.getJSON(dmJSON, function(data) {
        $.each(data.result, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.address.name + "</td>" + "<td>" + f.address.street + "</td>" + "</tr>"
          $(tblRow).appendTo("#resultdata tbody");
        });

      });

    });
  </script>
</head>

<body>

  <div class="wrapper">
    <div class="profile">
      <table id="resultdata" border="1">
        <thead>
          <th>Name</th>
          <th>Street</th>

        </thead>
        <tbody>

        </tbody>
      </table>

Note: Regular Ajax calls that return JSON (not JSONP) are subject to regular CORS restrictions. I have added a workaround in the demo above just for demonstrations purposes. In your concrete case, either deploy the page/script at the same host of the server, or add the necessary headers to the server.

Collectives™ on Stack Overflow

Convert JSON to HTML Table

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related