Saturday, February 11, 2017

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

By Hường Hana 7:00 PM , Leave a Comment

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=bunlongheng',       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

enter image description here

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=bunlongheng

I got the result fine !

enter image description here

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

6 Answers

Answers 1

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

Answers 2

  1. JsFiddle javascript set Load type = No wrap - in <body>
  2. remove <script> tag in javascript block
  3. change response.data to data
  4. 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=bunlongheng',            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/

Answers 3

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=bunlongheng'. 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/

Answers 4

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=bunlongheng',        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.

Answers 5

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.

Answers 6

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, still get below error if you execute your code 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=bunlongheng'. This request has been blocked; the content must be served over HTTPS.

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

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment