使用谷歌工作表API时Angular 1.6 $ http.jsonp

时间:2021-07-14 12:13:27

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

Angular 1.6的$ http.jsonp与google sheet的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.

我成功地通过使用函数(回调)和vnila js从表格中获取数据,当我尝试使用angular时,我在源代码中得到了一个“google.visualization.Query.setResponse”对象,控制台错误:未捕获的ReferenceError:未定义谷歌。

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 *), Things I tried:

最讨厌的事情 - 承诺没有回复响应,我无法更新我的表的值ansyc。我尝试了所有我能想到的(以及*中的每个建议),我尝试过的事情:

  1. passing the url as it is, without params, cuase myabe the $sce.trustAsResourceUrl needs the whole url.
  2. 在没有params的情况下传递url,使用$ sce.trustAsResourceUrl需要整个URL。

  3. passing without $sce (works in vanila js, not here).
  4. 没有$ sce的传递(在vanila js工作,不在这里)。

  5. naming my promise success function as "callback".
  6. 将我的承诺成功函数命名为“回调”。

  7. checking that all of the values in the sheets' API are here (again, works with vanila).
  8. 检查工作表API中的所有值是否都在这里(再次使用vanila)。

  9. calling "callback" inside the promise, entering it as a function inside the promise.
  10. 在promise中调用“callback”,将其作为promise中的函数输入。

  11. getting all the jsonp inside a function that return the response, with&without the callback function.
  12. 将所有jsonp放在一个返回响应的函数中,使用和不使用回调函数。

  13. removing the callback from the "tqx=responseHandler:callback" parameter all togther.
  14. 从“tqx = responseHandler:callback”参数中删除回调所有togther。

  15. passing the promise as a callback in the tqx param.
  16. 将承诺作为tqx参数中的回调传递。

  17. using the 1.5< "JSON_CALLBACK", which doesn't work with 1.6.
  18. 使用1.5 <“JSON_CALLBACK”,它不适用于1.6。

  19. making the request with the vanila js, and then passing it to the controller (dosen't work).
  20. 使用vanila js发出请求,然后将其传递给控制器​​(不能正常工作)。

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

如果我记得更多的东西,我会在下面更新。

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

拜托,任何人都可以找出问题所在吗?非常感谢,谢谢,Yoav。

1 个解决方案

#1


1  

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:

如果你们有同样的问题,请使用angular的$ scope。$ apply属性。这是Angular API中一个没有很好记录的属性,所以这里有一个很好的指南,介绍如何使用$ apply,一个很好的例子。我的实施:

$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!

不管怎样,谢谢你的投票!

#1


1  

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:

如果你们有同样的问题,请使用angular的$ scope。$ apply属性。这是Angular API中一个没有很好记录的属性,所以这里有一个很好的指南,介绍如何使用$ apply,一个很好的例子。我的实施:

$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!

不管怎样,谢谢你的投票!