1) Start by removing script tags from your JavaScript code. If you want to incorporate angular code using script tags, make sure to include it in an HTML file as shown below. Also, consider keeping your angular code in a separate file for organization.
2) Due to the large amount of data, it may take some time to load and the success block can take approximately 30 seconds to execute. Similarly, when printing data in HTML using angular, it may also require a few seconds.
3) When assigning data to the scope, utilize $scope.myData = data; instead of $scope.myData = response.data;. This is because the data is received in the 'data' parameter, not within the 'response' object (which is not within the parameters).
4) Keep in mind that you cannot make HTTP calls while on an HTTPS domain in angular. To resolve this, load your 'jsfiddle' in HTTP so that you can successfully make HTTP calls.
Other than these adjustments, there doesn't seem to be anything wrong with your code. I have made some necessary changes which are visible in the code snippet below. You can view a working plnkr example here.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Data is:</p>
<p>{{myData}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http({
method: 'GET',
url: 'http://d.biossusa.com/api/distributor?key=*****',
dataType: 'jsonp',
}).then(function (successResponse) {
debugger
$scope.myData = JSON.stringify(successResponse.data);
console.log("successResponse", successResponse.data);
}, function (error) {
$scope.myData = {};
console.log('error',error)
});
});
</script>
</body>
</html>
The provided code functions correctly, but it's worth considering using then instead of success. The reasoning behind this change is explained below.
Implementation of success():
By looking at Angular's source code here, we can see that success is essentially:
promise.success = function(fn) {
// ...
promise.then(function(response) {
fn(response.data, response.status, response.headers, config);
});
return promise;
};
Simply put, it is similar to then() but automatically deconstructs the response object. It serves as syntax sugar, providing a callback that receives the JSON object as its first argument without needing to access response.data directly. More information can be found in this source. Further details can easily be found through a quick internet search.