Getting Text from external URL via AngularJS

Question

I'm trying to get the JSON-Text-Stream from an URL (e.g. SOMEURL/ean.php?id=4001513007704). The result looks like this:

{
    "product": {
        "ean_id": "4001513007704",
        "title": "Gerolsteiner Mineralwasser",
...
     },
    "success": true
}

As you can see these are some informations for scanned items. I searched for implementations using URLs (--> http://www.w3schools.com/angular/tryit.asp?filename=try_ng_http_get ) and this example only works for the internal URL. Google and other sources leave the variable blank.

This does work. It returns the HTML-Code of the entered website:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

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

<p>Today's welcome message is:</p>

<h1>{{myWelcome}}</h1>

</div>

<p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome" variable.</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("http://www.w3schools.com/angular/default.asp")
  .then(function(response) {
      $scope.myWelcome = response.data;
  });
});
</script>

</body>
</html>

And this doesn't (variable is left blank). In this case i use Google but usually we would use another source!

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("http://google.com/")
  .then(function(response) {
      $scope.myWelcome = response.data;
  });
});
</script>

I assume that it's because of the security settings from the website..

How can i get the data from the URL? Is there any workaround?

Thanks for any kind of help!

Already voted to close. – IntelliJ Amiya Feb 23 '17 at 09:43 — IntelliJ Amiya, Feb 23 '17 at 09:43

score 1 · Answer 1 · answered Oct 17 '16 at 10:48

1

response.data will only return something if there is a data object within response.

The response thatyou get when you send a request to google.com is this:

<TITLE>302 Moved</TITLE></HEAD><BODY>
<H1>302 Moved</H1>
The document has moved
<A HREF="https://www.google.co.in/">here</A>.
</BODY></HTML>

This is because that URL serves up an HTML, and not some JSON response.

If you do a response.data on this, it will be undefined because there is no data there. If you hit a proper end point that has JSON data, you will get your response.

For example if you change the url to https://api.github.com/users/mralexgray/repos, you'll see data.

answered Oct 17 '16 at 10:48

nikjohn

20,026
14
50
86

Shouldn't response.data return at least the HTML Code from the Website? It shouldn't be blank.. – Amiya Oct 17 '16 at 13:18
response would. response.data wouldn't. Because this is not JSON, and you can't use the dot notation – nikjohn Oct 17 '16 at 13:26

score 0 · Answer 2 · answered Oct 17 '16 at 11:21

You are getting this error because you are not defining the angular module to be included in the html. Try running the above code in w3 schools with the link http://google.com/ in the site as shown

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

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

<p>Today's welcome message is:</p>

<h1>{{myWelcome}}</h1>

</div>

<p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome" variable.</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("http://google.com/")
  .then(function(response) {
      $scope.myWelcome = response.data;
  });
});
</script>

</body>
</html>

Hey! Sorry, but i don't get what you are trying to tell me. Your screenshot leaves the space blank as well! Can you explain what you mean in concrete? — Amiya, Oct 17 '16 at 13:22
Screenshot describes tha twhen i hit google.com it responds success and then the message is printed,meaning it works — Pritish Vaidya, Oct 17 '16 at 13:36

Getting Text from external URL via AngularJS

2 Answers2