Cannot display data from google spreadsheets using html

  1. last year

    Hi I am new to this site and I am also learning how to make a script. Am only a musician but I get interested when I came across with your sample "upcoming decks list". I made a copy of your spreadsheet exactly what is written in the content which you can find here https://docs.google.com/a/energy.com.ph/spreadsheets/d/1hsm8MRcalUz8rRefougFBUdYcMoqww1hcNuRozWYAzY/edit#gid=0 and your script and html. Below are the codes:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>$(function() { alert('hello') });</script>
    </head>
    <body>
    <p>&raquo; <a href="https://docs.google.com/spreadsheet/ccc?key=1hsm8MRcalUz8rRefougFBUdYcMoqww1hcNuRozWYAzY#gid=0" target="_blank">View This Spreadsheet on Google Docs!</a></p>
    <table id="upcoming">
    <tr>
    <th>Deck Name</th>
    <th>File Name</th>
    <th>Category</th>
    <th>Deck Maker</th>
    <th>Complete?</th>
    </tr>
    </table>
    <script>

    $.getJSON("http://spreadsheets.google.com/feeds/list/1hsm8MRcalUz8rRefougFBUdYcMoqww1hcNuRozWYAzY/od6/public/values?alt=json-in-script&amp;callback=?")
    .done( function(data) {
    var ssData = data.feed;
    $.each( ssData.entry, function() {
    // show a checkmark for completed decks
    var complete;
    if ( this.gsx$complete.$t == 1 ) {
    complete = '&amp;#9745;';
    }
    else {
    complete = '&amp;#9744;';
    }
    // create and populate rows
    $('#upcoming').append(
    '<tr>'
    + '<td>' + this.gsx$deckname.$t + '</td>'
    + '<td>' + this.gsx$filename.$t + '</td>'
    + '<td>' + this.gsx$category.$t + '</td>'
    + '<td>' + this.gsx$deckmaker.$t + '</td>'
    + '<td>' + complete + '</td>'
    + '</tr>'
    );
    });
    });
    </script>
    </body>
    </html>

    When I run this html, the data from the spreadsheet will not display. Only the header. I've read a lot of scripts with similar scenarios but I can't get it. Any help?

    Thank you very much.

  2. Bloo

    7 Apr 2017 Administrator kablooey.net

    Hey @victorsax, sorry for late reply. Did you complete the following steps to allow data sharing on your spreadsheet?

    2. Configuring the Spreadsheet to Allow Data Sharing
    In order for the Google Data API request to work, you must "Publish" your spreadsheet. Navigate to "File" > "Publish to the web..." and click on the "Start Publishing" button.

    You should also check "Automatically republish when changes are made" to ensure that the Google Data API can see any updates that you make to the spreadsheet.

    If that's not the issue, are you seeing any errors in the JavaScript console when you try with your code?

  3. Hey Bloo,

    Thank you very for the reply. I already done my script and found the data displayed already. It now works fine. However, I can't see any sample on how to paginate the page if I have a long data displayed on the screen. Could you please provide a sample with a jquery table.

    Thanks for the help.

or Sign Up to reply!