Search code examples
javascriptgoogle-sheetsdatatablestabletop.js

Print out values via tabletop.js


I am loading a google spreadsheet via tabletop.js and when the user types in the title of a book, the script is supposed to print out the author of the book. So if you type in "Kindred" it is supposed to return "Octavia Butler". I can't figure out how I can access the author by passing in the title.

https://codepen.io/scibe90/pen/zYvYgZz

This is the Spreadsheet:

https://docs.google.com/spreadsheets/d/1sbyMINQHPsJctjAtMW0lCfLrcpMqoGMOJj6AN-sNQrc/pubhtml

I am quite new to coding so maybe someone can give me a hint? Thank you very much!

Beste wishes


Solution

  • Not really a DataTable question but fun, and I'm bored witless ;-)

    The URL you posted is correct and you had it commented out in the CodePen, I don't use it so I've posted the corrected version on JSFiddle here. You were nearly there but you needed to check the searching function you were trying, that would've worked with types of data but not the one you were using. You needed to search through the objects returned for a value and then return a different value from the found object.

    You also had two methods kicking off once when the DOM was loaded, so I've removed one.

    var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1sbyMINQHPsJctjAtMW0lCfLrcpMqoGMOJj6AN-sNQrc/pubhtml';
    
    function showInfo(data, tabletop) {
      dt = data;
    }
    var dt;
    $(document).ready(function() {
      Tabletop.init({
        key: publicSpreadsheetUrl,
        callback: showInfo,
        simpleSheet: true
      });
      $("#buttonShow").click(function() {
        var num = $("#txtBox").val();
        $("#result").html(
          "You typed:" + $("#txtBox").val() + "<br/>" + "The corresponding value is: " + dt.find(el => el.title.toLowerCase().trim() === num.trim().toLowerCase()).author
        );
      });
    });
    

    There are lots of other things which could be improved, but this works! Hope it helps some and good luck!