1

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;
          });
        }
      }
    }]);
2
  • stackoverflow.com/questions/12066002/… Commented Dec 31, 2015 at 9:57
  • did you defined function myJsonMethod? if not you can use JSON_CALLBACK Commented Dec 31, 2015 at 9:57

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.