Make a GET to an endpoint and print out data using Angular

Question

I'm trying to make a GET to my endpoint and print data in my page

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>



<div ng-app="myApp" ng-controller="myCtrl">

  <p>Data is:</p>
  <h1>{{myData}}</h1>

</div>



<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope, $http) {

    var promise = $http({
      method: 'GET',
      url: 'http://d.biossusa.com/api/distributor?key=*****',
      dataType: 'jsonp',
    });

    promise.success(function (data, status, header, config) {
      console.log("status is ", status);
      console.log(config.method + " data is: " + config.data);
      console.log("data is ", data);
      $scope.myData = response.data;

    });

  });

</script>

I kept getting

I am expected to get the data printing out !

https://jsfiddle.net/bheng/b3rgh92v/

When I curl this url : http://d.biossusa.com/api/distributor?key=*****

I got the result fine !

What did I do wrong on my angular ? Any hints ?

Have you added the reference of your script in your html or its all inline? — Ali Baig, Jan 28 '17 at 00:41

score 9 · Answer 1 · answered Jan 28 '17 at 00:57

Few observations:

1): Make sure you have added the reference of your script file in your html if you are using external file (where you are creating angular module).

2): Remove response from your assignment

$scope.myData = response.data;  //response is undefined, so remove it

It should be

$scope.myData = data;

3) Lastly, make sure you are allowed to call that endpoint [I get an error saying I can't call http endpoint from plnkr's HTTPS endpoint so I updated the GET URL]. I tried your code in plunker with a different URL and it worked ok with the above changes. Here is plnkr link

score 6 · Answer 2 · edited May 10 '17 at 16:04

JsFiddle javascript set Load type = No wrap - in <body>
remove <script> tag in javascript block
change response.data to data
load JsFiddle in http because your endpoint only allow http

    var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope, $http) {
    
    var promise = $http({
          method: 'GET',
          url: 'http://d.biossusa.com/api/distributor?key=*****',
          dataType: 'jsonp',
        });
    
        promise.success(function (data, status, header, config) {
          console.log("status is ", status);
          console.log(config.method + " data is: " + config.data);
          console.log("data is ", data);
          $scope.myData = data;
        });    
      });

http://jsfiddle.net/b3rgh92v/15/

score 4 · Answer 3 · edited May 10 '17 at 16:07

1) First of all remove script tags from javaScript. if you want to use
angular code with script tag then put it in html file like i did below. but you should keep angular code in separate file.

2) data is large that is why it takes time to load and success block takes 30 seconds approx to execute. so the same when printing data in html angular takes few seconds.

3) use $scope.myData = data; instead of $scope.myData = response.data; because data is receiced in data parameter not in response(response is not in params)

4) You cant make http calls when you are on https domain in angular. load your jsfiddle in http then you can make http calls.

else nothing wrong with your code. I made some necessary changes see code below. A working plnkr 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>

Above code works fine but you can also consider to Use then instead of success. why? see below.

How success() is implemented If we look in Angular’s source code here we can see that success is basically:

promise.success = function(fn) {
// ...
promise.then(function(response) {
    fn(response.data, response.status, response.headers, config);
});
return promise;
};

So it’s just like then() but deconstructing the response object. This is essentially just syntax sugar so you’d have a callback that gets the JSON object back as its first argument and save you reaching into response.data yourself. from source. just google and you will get may more.

rleffler · Answer 4 · 2017-01-30T16:43:07.533

3

I copy and pasted your example into a plunkr and it works just fine (other than it will not make your ajax because of CORS).

https://plnkr.co/edit/oEkv3vgkotjJhVFrSvu2?p=preview

You also need to remove the <script> tags from your javascript window on your fiddle

I took a look at your jsFiddle, commented out the javascript, and the console is still saying there is an injector error which is odd.

edited Jan 30 '17 at 16:43

answered Jan 28 '17 at 00:54

rleffler

430
6
15

I have your suggested plunk, I couldn't see it printing out. You may see it here : https://plnkr.co/edit/oEkv3vgkotjJhVFrSvu2?p=preview – code-8 Jan 29 '17 at 19:29
Any further suggestion on that will be much appreciated ! – code-8 Jan 29 '17 at 19:30
@ihue The plunkr just gets angular running. The data will not print because of CORS. You will have to enable that on your server. I am not sure what you are using for your server side code so i would suggest googling that. After that it should work. – rleffler Jan 30 '17 at 16:44
I am using Nginx. Do u know anything about that ? – code-8 Feb 05 '17 at 19:43
@ihue this post goes over that: http://stackoverflow.com/questions/14499320/how-to-properly-setup-nginx-access-control-allow-origin-into-response-header-bas – rleffler Feb 06 '17 at 20:05

score 3 · Answer 5 · edited May 10 '17 at 16:04

Some observations as per your JSFiddle :

Change LOAD TYPE from onLoad to No wrap - in <head>.
No need to include jQuery as External Resources in fiddle.
remove script start<script> and end</script> tag from the JAVASCRIPT section from fiddle.
As JSON execute over http protocol but JSFiddle execute over https protocol.Hence, you will get below error if code has been executed over JSFiddle.

Mixed Content: The page at 'https://jsfiddle.net/bheng/b3rgh92v/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://d.biossusa.com/api/distributor?key=*****'. This request has been blocked; the content must be served over HTTPS.

Updated JSFiddle : https://jsfiddle.net/b3rgh92v/9/

Yes, result will not display due to CORS issue as protocols are different. I already mentioned in my answer. — Debug Diva, Feb 05 '17 at 17:58

score 3 · Answer 6 · edited May 10 '17 at 16:04

I read your code on fiddle and observe some problem

1. Angular module not found problem

In your example you add <script> tag in script saction. You don't need add <script> tag in that saction because that already add inside a <script> saction.

Also your JavaScript code run onload event, so when angular bootstrapping, module not available. So change it to No wrap - in <body> by JavaScript setting available in JavaScript section right top.

2. Calling request to `http` server from `https` server

ERROR : Mixed Content: The page at 'https://jsfiddle.net/b3rgh92v/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://d.biossusa.com/api/distributor?key=*****'. This request has been blocked; the content must be served over HTTPS.

You can call https request from non https server but you can't call a non https server request from https server. You need to request on https server only from https

I have changed url to some another testing api on https server. It's working fine.

You can check updated code on https://jsfiddle.net/b3rgh92v/11/

Make a GET to an endpoint and print out data using Angular

6 Answers6

1. Angular module not found problem

2. Calling request to http server from https server

2. Calling request to `http` server from `https` server