0
votes

I wrote a custom Google Script which outputs an object for me and I would like to be able to call it and assign it to a variable which is then used to display data on a website.

Currently, I have figured out to access the data using another Google Scripts project, however I can't find a way to do it using something like a JS file on my computer or DreamHost server.

This is what I have tried:

var infected_data = getData();

function getData() {
  var URL = 'https://script.google.com/macros/s/AKfycbzsyQNJwDvQc5SvNGEDZZOoNI3XxNar9PA9sRucZx7mgzfWpFQ/exec';

  var response = UrlFetchApp.fetch(URL);

 return response;
}

on something like playcode.io it gives me the following error:

error: Uncaught ReferenceError: UrlFetchApp is not defined

I get the same thing just putting it on my computer and running it there with Chrome:

enter image description here

It appears UrlFetchApp is only for within Google Scripts. Is there some other way to access the output outside of the Google environment.

*I don't know how authorization and all that fits in here (because Google Scripts seems to run it as my user. right?)

HTML Header:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>JQVMap - World Map</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../dist/jquery.vmap.js"></script>
    <script type="text/javascript" src="../dist/maps/jquery.vmap.world.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery.vmap.sampledata.deaths.js"></script>
    <script type="text/javascript" src="js/jquery.vmap.sampledata.infected.js"></script>
    <script>
        jQuery(document).ready(function () {
            jQuery('#vmap').vectorMap({
                map: 'world_en',
                backgroundColor: '#333333',
                color: '#ffffff',
                hoverOpacity: 0.8,
                selectedColor: '#3498DB',
                enableZoom: true,
                showTooltip: true,
                scaleColors: ['#F3A291', '#FF4F3B'],
                values: infected_data,
                normalizeFunction: 'polynomial',
                onLabelShow: function (event, label, code) {
                    label.html('<div class="map-tooltip"><h1 class="header"> ' + label.html() + '</h1><p class="description">Infected: ' + infected_data[code] + '</p><p class="description">Deaths: ' + death_data[code] + '</p></div>');
                }
            });
        });
    </script>
</head>

Google Scripts File:

function doGet() {
    var result = {};
    var infected = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data').getDataRange().getValues();
    var death = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data').getDataRange().getValues();
    result = makeObject(infected);

    return ContentService.createTextOutput(JSON.stringify(result)).setMimeType(ContentService.MimeType.JSON);
}

function makeObject(multiArr) {
    var obj = {};
    var countrystats = {};
    var headers = multiArr.shift();

    for (var i = 0; i < headers.length; i++) {
        countrystats[i] = multiArr.map(function (app) {
            return app[i];
        })
    }

    for (var m = 0; m < countrystats[1].length; m++) {
        obj[countrystats[1][m]] = 0;
    }

    for (var j = 0; j < countrystats[1].length; j++) {
        var TempVar;
        TempVar = obj[countrystats[1][j]];
        obj[countrystats[1][j]] = TempVar + countrystats[3][j];

    }

    return obj;
}

Google Scripts Output (using the JSON View chrome extension):

{
cn: 8134,
th: 23,
mo: 7,
us: 5,
jp: 11,
kr: 4,
sg: 10,
vn: 2,
fr: 5,
np: 1,
my: 8,
ca: 3,
ci: 1,
lk: 1,
au: 9,
de: 4,
fn: 1
}

This is a public link with the object/data i want on it (the same object shown above):web app: https://script.google.com/macros/s/AKfycbzsyQNJwDvQc5SvNGEDZZOoNI3XxNar9PA9sRucZx7mgzfWpFQ/exec

So basically anyone who uses it should be able to access it. I just need a way to assign that data to a local JS variable. The google sheets script is published as a web app. If I'm not mistaken there is a setting to allow anyone, even anonymous to access it.

Here is my attempt at an AJAX request: var url = "https://script.google.com/macros/s/AKfycbzsyQNJwDvQc5SvNGEDZZOoNI3XxNar9PA9sRucZx7mgzfWpFQ/exec";

  var infected_data = jQuery.ajax({
    crossDomain: true,
    url: url,
    method: "GET",
    //dataType: "jsonp"
  });

If i uncomment the jsonp I get an error:

jquery-1.11.3.min.js:5 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://script.googleusercontent.com/macros/echo?user_content_key=JXkCjiJjhcjndRREjoGyVNkZNkD-HvKpEPkpicQBm9nR9OkxjGXdYuOPsLxbJf-B9Rgifl5NWMtzgjfVGuMdGxTJrjKnRpdcOJmA1Yb3SEsKFZqtv3DaNYcMrmhZHmUMWojr9NvTBuBLhyHCd5hHazTNYZyoqG0ZuVXpWSNdoeLErB4AfUCNPKJHgELe5WaAmN5SlwIhonlWkkbFzR8kUwjKrMtdq9u-YqreD7W_KJ_aVqKVBTehAuogPCoZCfVc4yJf5ieDCdMDbXQ8FZZq8iSedsk1Px1LnPBLM8W-ZRcknnbJNT8dS525XG1pNEBR&lib=Mw_Scq3iKhByBS86NJpd_CngcdEShCw7K with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

I don't get any errors if i remove it. However, i still can't see the data on my interactive map (My application).

2
thank you for your helpful insight. Right now I have a bunch of website files sitting in a folder on my desktop. The HTML file has a script in its header which calls a java script file with just an object inside of it lined to a variable. (Var TestObject = {Item1, Item2, Item3, Item4....}. The google script returns that object. So if gives you any more information, i just need to get that object from google scrips to my java script variable locally.Camden S
These files will then be uploaded to a dream host server to be hosted, if that changes anything. I'll look into the GET request. in the mean time if you have any other information, that would be great. Thanks! :)Camden S
Question updated. I am using JQVMaps. (GitHub can be found here: github.com/10bestdesign/jqvmap) The infected_data object (This is what is being produced by my google script) is stored in this JS file: "js/jquery.vmap.sampledata.infected.js". Similar for the death_data in the "js/jquery.vmap.sampledata.deaths.js" fileCamden S
Please show JSON and other text-based output as text, not as image of text. Also, there is no need to put "Update:" in front of everything; we can see the entire history of the edits made to the question if we want to know what's new.Heretic Monkey
cool, thanks for the tips. Still getting the hang things around here. :)Camden S

2 Answers

1
votes

If you are trying to get data from a Google Spreadsheet from outside of Google Apps Script, like on your own website/server, you will need to use the Sheets API.

Here is a good article on how to make Google API calls using JavaScript: https://medium.com/google-cloud/gapi-the-google-apis-client-library-for-browser-javascript-5896b12dbbd5.

0
votes

const url = "PUT YOUR GOOGLE WEB APP URL HERE";

// Declare an async function
  const getData = async () => {
  // Use the await keyword to let JS know this variable has some latency so it should wait for it to be filled 
  // When the variable is fetched, use the .then() callback to carry on 
    const DataJSON = await fetch(url).then(response => 
      response.json()
    )

    return await DataJSON
  };