AngularJS http.jsonp回调未定义

时间:2015-12-31 09:54:27

标签: javascript angularjs onsen-ui

我正在尝试从控制器内部检索jsonp数据。我想从$ http.jsonp里面的url中获取一些jsonp数据并通过一个成功函数传递它,该函数遍历数据然后将其推送到变量 dataxx 但是我不断收到此错误:< / p>

  

未捕获的ReferenceError:未定义myJsonMethod

 angular.module('app',  ['onsen'])

    .controller('ChartController', ['$scope', '$http', function($scope,$http) {
      this.data = [{
        key: 'Data',
        values: []
      }];
      $http.jsonp("https://demo8162910.mockable.io/json?callback=myJsonMethod").
            success(function(data, status, headers, config) {
                //what do I do here?
                dataxx.push({"x":9,"y":11},{"x":9,"y":18});
            }).
            error(function(data, status, headers, config) {
                $scope.error = true;
            }); 

      $scope.data = [{
            key: 'Data',
            values: dataxx
        }];       

    }])

    .factory('d3', [function() {
      return d3;
    }])

    .factory('nv', [function() {
      return nv;
    }])

    .directive('lineChart', ['d3', 'nv', function(d3, nv) {
      return {
        restrict: 'E',
        scope: {
          data: '=',
          height: '@',
          width: '@'
        },
        template: '<svg ng-attr-height="{{ height }}" ng-attr-width="{{ width }}"></svg>',
        link: function(scope, element) {
          var svg = element.find('svg'),
            chart;

          var update = function() {
            d3.select(svg[0])
              .datum(scope.data)
              .call(chart);
          };

          scope.$watch(function() { return angular.toJson(scope.data); }, function() {
            if (chart) {
              update();
            }
          });

          scope.$on('chartloaded', update);

          nv.addGraph(function() {
            chart = nv.models.lineChart()
              .showLegend(false)
              .showYAxis(true)
              .showXAxis(true);

            chart.xAxis
              .axisLabel('x')
              .tickFormat(d3.format('.2f'));

            chart.yAxis
              .axisLabel('y')
              .tickFormat(d3.format('.2f'));

            nv.utils.windowResize(function() {
              chart.update()
            });

            scope.$emit('chartloaded');

            return chart;
          });
        }
      }
    }]);

1 个答案:

答案 0 :(得分:1)

documentation引用传递给url方法的jsonp参数:

  

指定请求目标的相对或绝对URL。   回调的名称应该是字符串JSON_CALLBACK。

所以:

https://demo8162910.mockable.io/json?callback=JSON_CALLBACK

或者,如果您想使用myJsonMethod,请确保您已定义了此类函数,该函数将被调用:

function myJsonMethod(result) {
    ... 
}

在您的情况下,您使用标准的.success回调,内部将定义一个名为JSON_CALLBACK的函数。

不幸的是,我可以看到这个远程端点完全忽略了callback查询字符串参数。以下网址都返回相同的结果,当然是错误的:

因此,我建议您与已实现此API的开发人员交谈,并要求他们不要硬编码(如果可能的话)回调名称,而是尊重查询字符串参数。

如果由于某种原因无法修复此API,那么您唯一的机会就是定义一个名为myJsonMethod的函数,如前所示。