JSON to HTML from url

Question

I am currently trying to learn RESTful API's and implementing them into use case and one of the things I am trying to do is to load the url with the json payload from one server into a separate web server to display on a table the data. I am not too familiar with this so I am trying to find out the best way to do this.

I am using this API to post to a page which is domain.com/todos

https://github.com/corylanou/tns-restful-json-api

And then I am attempting to use this to print it out to a table https://github.com/sam-suresh/JSON-URL-to-HTML-Table

but it doesn't look like it is working. I put it all into a single index file and it shows it hitting my api on the console but I am not showing any output in the table.

<html>
<table id="personDataTable">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>due</th>
    </tr>

</table>

<style>
table {
  border: 2px solid #666;
    width: 100%;
}
th {
  background: #f8f8f8;
  font-weight: bold;
    padding: 2px;
}
</style>
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
$.ajax({
    url: 'http://my-website-domain.com/todos',
    type: "get",
    dataType: "json",

    success: function(data) {
        drawTable(data);
    }
});

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row);
        row.append($("<td>" + rowData.id + "</td>"));
        row.append($("<td>" + rowData.name + "</td>"));
        row.append($("<td>" + rowData.due + "</td>"));
    }

</script>
</html>

And this is what it shows on the /todos page

[{"id":1,"name":"Write presentation","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":2,"name":"Host meetup","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":3,"name":"New Todo","completed":false,"due":"0001-01-01T00:00:00Z"}

Can you share what do you receive in data? console.log(data) in drawTable function for example and provide an output — qiAlex
– qiAlex, Commented Nov 2, 2018 at 1:13
It looks like your todos JSON is missing a closing square bracket. Are there any errors being thrown in the console? — Jason
– Jason, Commented Nov 2, 2018 at 1:14
Your complete code is correct. May be the issue is in getting data, like the response which you shown above is not directly in data object. So once share or check data came from the ajax call. — Manikanta Chinta
– Manikanta Chinta, Commented Nov 2, 2018 at 1:18
Are you sure data of success: function(data) is a json object? — hoangdv
– hoangdv, Commented Nov 2, 2018 at 1:46
Response by qiAlex helped me figure it out. CORS wasn't enabled so the json was getting blocked. Enabled and now it works — WiththeWind
– WiththeWind, Commented Nov 2, 2018 at 1:46

Andrew Ridgway · Accepted Answer · 2018-11-02 01:29:46Z

0

The success function isn't passed the raw data. It's passed an object with a lot of different properties. Data is just one of them. Try this:

$.ajax({
    url: 'http://my-website-domain.com/todos',
    type: "get",
    dataType: "json",

    success: function(results) {
        drawTable(results.data);
    }
});

It's also possible I'm remembering this wrong. I'd put a debugger in your success function and see what it's actually getting passed, then go from there.

answered Nov 2, 2018 at 1:29

Andrew Ridgway

5842 silver badges9 bronze badges

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

Comments

Juan Daniel Ornella · Accepted Answer · 2018-11-02 01:38:53Z

0

The problem is that the JSON returned by the page /todos is not a valid JSON Array. Missing the

at the end.

So it would be:

[{"id":1,"name":"Write presentation","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":2,"name":"Host meetup","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":3,"name":"New Todo","completed":false,"due":"0001-01-01T00:00:00Z"}]

Here is a page to validate JSON data: Json Parser Online

answered Nov 2, 2018 at 1:38

Juan Daniel Ornella

6337 silver badges14 bronze badges

Comments

WiththeWind · Accepted Answer · 2018-11-02 01:48:10Z

0

Thank you all for all of the help. The issue was that the CORS policy wasn't enabled so the request was getting blocked. The fix was to simply enable CORS which was done in the handlers.go for this particular API by adding

w.Header().Set("Access-Control-Allow-Origin", "*")

answered Nov 2, 2018 at 1:48

WiththeWind

1531 silver badge10 bronze badges

Comments

son pham · Accepted Answer · 2018-11-02 04:37:32Z

I think you check API get json data, I copy your code and hash code json data and see it work.

//$.ajax({
//    url: 'http://my-website-domain.com/todos',
//    type: "get",
//    dataType: "json",
//
//    success: function(data) {
//        drawTable(data);
//    }
//});
var data = [{"id":1,"name":"Write presentation","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":2,"name":"Host meetup","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":3,"name":"New Todo","completed":false,"due":"0001-01-01T00:00:00Z"}];

 drawTable(data);

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row);
        row.append($("<td>" + rowData.id + "</td>"));
        row.append($("<td>" + rowData.name + "</td>"));
        row.append($("<td>" + rowData.due + "</td>"));
    }

<html>
<table id="personDataTable">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>due</th>
    </tr>

</table>

<style>
table {
  border: 2px solid #666;
    width: 100%;
}
th {
  background: #f8f8f8;
  font-weight: bold;
    padding: 2px;
}
</style>
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</html>

Monarth Sarvaiya · Accepted Answer · 2018-11-02 04:38:22Z

To make table of json data, you can use jQuery DataTables.

Here is the sample code:

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": 'http://www.json-generator.com/api/json/get/cjnIrxkIUi?indent=2'
    } );
} );

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">


<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

Collectives™ on Stack Overflow

JSON to HTML from url

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related