AngularJS http.jsonp callback not defined

Question

I am trying to retrive jsonp data from inside my controller. I want to grab some jsonp data from the url inside $http.jsonp and pass it through a success function that loops through the data and then pushes it into a variable dataxx however I keep getting this error:

Uncaught ReferenceError: myJsonMethod is not defined

 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;
          });
        }
      }
    }]);

http://stackoverflow.com/questions/12066002/parsing-jsonp-http-jsonp-response-in-angular-js — AlainIb, Dec 31 '15 at 09:57
did you defined function `myJsonMethod`? if not you can use `JSON_CALLBACK` — maurycy, Dec 31 '15 at 09:57

score 1 · Answer 1 · answered Dec 31 '15 at 09:57

Quote from the documentation about the url parameter passed to the jsonp method:

Relative or absolute URL specifying the destination of the request. The name of the callback should be the string JSON_CALLBACK.

So:

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

Alternatively if you want to use myJsonMethod make sure that you have defined such function which will be called:

function myJsonMethod(result) {
    ... 
}

In your case you used the standard .success callback which internally will define a function called JSON_CALLBACK.

Unfortunately from what I can see this remote endpoint completely disregards the callback query string parameter. The following urls all return the same result which is wrong of course:

So I would recommend you talking with the developers that have implemented this API and ask them not to hardcode if possible the callback name but rather to respect the query string parameter.

If for some reason this API cannot be fixed, then your only chance is to define a function called myJsonMethod as I showed earlier.

AngularJS http.jsonp callback not defined

1 Answers1