Output JSON to html table

Question

I'm having trouble outputting a JSON to a HTML table within my tab (for part of a javascript/jQuery evening course assignment). Please could someone have a look, and advise what sort of amendments I would have to make to output in a table format? I get the success alert, but the table doesn't populate.

Thanks.

// Tabs
$(function() {
    $( "#tabs" ).tabs();
});

// Spanish 
$(document).ready(function(){
    $.ajax({ 
        url:   "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php", // path to file
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'jsonpCallback',
        success: function () {
            alert('success');
        }               
    });
});

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

function drawRow(rowData) {
    var row = $("<tr />")
    $("#table").append(row);
    row.append($("<td>" + rowData.course + "</td>"));
    row.append($("<td>" + rowData.name + "</td>"));
    row.append($("<td>" + rowData.price + "</td>"));
}

And the HTML:

<div id="tabs">
    <ol start="50">
        <li>
            <a href="#tab-1">Italian</a>
        </li>
        <li>
            <a href="#tab-2">Spanish</a>
        </li>
    </ol>

    <p id="tab-1"></p>
    <p id="tab-2">
        <table id='table'>
            <thead>
                <tr>
                    <th>Course</th>
                    <th>Name</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </p>
    <p id="tab-3"></p>
</div>

you aren't calling drawTable anywhere, and you do nothing with the data you receive from your ajax call at all - also jsonp:"callback" is redundant as callback is the default value for jsonp — Jaromanda X
– Jaromanda X, Commented Dec 13, 2016 at 14:02

Rory McCrossan · Accepted Answer · 2016-12-13 14:23:29Z

1

The main issue with your code was that you didn't call any function after the AJAX request completed successfully. You needed at least call drawTable() to populate the data.

However there are several improvements you can make to your code. Firstly, remove jsonp: 'callback'. It's the default value, and also redundant as you're supplying jsonpCallback. You can also then change jsonpCallback to 'drawTable'. This negates the need for the success handler function and means all the request data will be directly provided to your drawTable() function. Lastly, rather than creating DOM elements in memory and appending in each iteration of the loop it's much quicker to build a single string with all the table's HTML and append it once when finalised.

With all that said, try this:

$(document).ready(function() {
  $.ajax({
    url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
    dataType: 'jsonp',
    jsonpCallback: 'drawTable'
  });
});

function drawTable(data) {
  var html = '';
  for (var i = 0; i < data.length; i++) {
    html += '<tr><td>' + data[i].course + '</td><td>' + data[i].name + '</td><td>' + data[i].price + '</td></tr>';
  }
  $('#table tbody').append(html);
}

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

<table id="table">
  <thead>
    <tr>
      <th>Course</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Note that I reduced the HTML shown here to only the relevant parts.

answered Dec 13, 2016 at 14:23

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

Tatws24 Over a year ago

**Thanks very much. If i now wanted the italian menu (italian.php) to be put on the Italian Tab, would I simply just change the URL, or is it more complicated that that?

Rory McCrossan Over a year ago

Yep, just different URL and change the target table element to update

xpeiro · Accepted Answer · 2016-12-13 14:11:53Z

1

// Tabs
$(function() {
    $( "#tabs" ).tabs();
});

// Spanish 
$(document).ready(function(){
    $.ajax({ 
        url:    "http://learn.cf.ac.uk/    webstudent/sem5tl/javascript/assignments/spanish.php", 
    // path to file
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'jsonpCallback',
        // The var you put on this func will store data 
        success: function (data) {
            alert('success');
            // Call the function passing the data recieved
            drawTable(data);
        }               
    });
});

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

function drawRow(rowData) {
    var row = $("<tr />")
    $("#table").append(row);
    row.append($("<td>" + rowData.course + "</td>"));
    row.append($("<td>" + rowData.name + "</td>"));
    row.append($("<td>" + rowData.price + "</td>"));
}

answered Dec 13, 2016 at 14:11

xpeiro

7896 silver badges21 bronze badges

2 Comments

Rory McCrossan Over a year ago

Welcome to Stack Overflow! While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations!

xpeiro Over a year ago

I think you are right, I'm going to bear it in mind on my future answers.

Collectives™ on Stack Overflow

Output JSON to html table

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related