Angular 1.6 $http.jsonp while using the google sheets API

Question

The Angular 1.6's $http.jsonp does not play nice with the google sheets' API:

I'm trying to fetch and then get my data from google sheets, with the following:

var callback;
app.controller("meetingsTable", function ($scope, $http, $sce) {

var url = "http://spreadsheets.google.com/a/google.com/tq";
var trustedUrl = $sce.trustAsResourceUrl(url);
var key = 'MY_KEY';
var tq = 'select%20*%20limit%2010';
var tqx = 'responseHandler:callback';
var params = {
    key: key,
    tq: tq,
    status: 'ok',
    tqx: tqx
};

callback = function (response) {
    console.log(response); // entering here, not to the promise
    return response;
}


    $http.jsonp(trustedUrl, { params: params }).then(function (response) {
        console.log(response);
        retrun;
        //success things go here
    }, function (response) {
        //error things go here
    });
});

I successfuly manged to get the data from the sheets, by using a function (callback), with a vnila js, by when I tried with angular, I got an "google.visualization.Query.setResponse" object in the sources, with the console error: Uncaught ReferenceError: google is not defined.

The most annoying thing - the promise doesn't recive the response, and I can't update my table's values ansyc. I tried everything I could think of (and every suggestion in stackoverflow), Things I tried:

passing the url as it is, without params, cuase myabe the $sce.trustAsResourceUrl needs the whole url.
passing without $sce (works in vanila js, not here).
naming my promise success function as "callback".
checking that all of the values in the sheets' API are here (again, works with vanila).
calling "callback" inside the promise, entering it as a function inside the promise.
getting all the jsonp inside a function that return the response, with&without the callback function.
removing the callback from the "tqx=responseHandler:callback" parameter all togther.
passing the promise as a callback in the tqx param.
using the 1.5< "JSON_CALLBACK", which doesn't work with 1.6.
making the request with the vanila js, and then passing it to the controller (dosen't work).

If I'll remember in more things, I will update below.

please, can anyone figure out what's the problem? REALLY appreciate, Thanks, Yoav.

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Answering my own question:

if you guys have the same problem, use angular's $scope.$apply property. this is a not so well-documented property in Angular's API, so here's a nice guide for when a how to use $apply, with a nice example. My implementation:

$scope.tableContentData;
callback = function (response) {
    $scope.$apply(function () {
        $scope.tableContentData = response;
    });
};
$http.jsonp(trustedUrl).then(function () {
        //success stuff
    }, function () {
        //error stuff
    });

when I declared callback outside my controller.

This was a nightmare.

Thanks for the votes-ups anyways!

Angular 1.6 $http.jsonp while using the google sheets API

1 Answers1