Error importing Dynamic Json via Angularjs

Question

Error importing Dynamic Json via Angularjs

Asked 8 years, 11 months ago

Viewed 388 times

4

Hello, I’m having trouble importing this Json and others, I don’t know what I might be doing wrong in that...

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  
  <script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('heroisCtrl', function($scope, $http) {
       $http.get("https://angularjs.org/greet.php?callback=herois&name=Super%20Hero")
       .success(function(data) { $scope.names = data;});
    });
    </script>
</head>
<body>

<div ng-app="myApp" ng-controller="heroisCtrl">
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.name }}</td>
    <td>{{ x.greeting }}</td>
  </tr>
</table>
</div>

</body>
</html>

This error appears on the console: Xmlhttprequest cannot load https://angularjs.org/greet.php?callback=herois&name=Super%20Hero. No 'Access-Control-Allow-Origin' header is present on the requested Resource.

– Fábio Duarte

2015/07/10 at 13:34

1 answer

Browser other questions tagged json angularjs

You are not signed in. Login or sign up in order to post.

by bfavaretto • **64,705** points · Answer 1 · 2015-07-10T14:45:08+00:00

Looks like you’re mixing up some stuff from the Angular documentation, I’ll try to explain the problems:

This url you are using returns JSONP to bypass the access restriction policy for another domain. To receive data in this format, you need to use the method $http.jsonp instead of $http.get.
According to the documentation of that method, the parameter callback url must have value JSON_CALLBACK, and not herois as you are using. Otherwise Angular will not know how to treat the result (if you want to keep it your way, you would need to have a function herois to deal with the outcome).
The data returned by this URL come like this:
```
{"name":"Super Hero","salutation":"Dia Duit","greeting":"Dia Duit Super Hero!"}
```
That is, it is an object, not an array. But your view code is treating it like an array of objects, which would create a row in the table for each object with the ng-repeat. This will not work with this data, you would need to eliminate the repeat and take the properties directly from the object.

Fixing these issues, your code would look like this:

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  
  <script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('heroisCtrl', function($scope, $http) {
       $http.jsonp("https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero")
       .success(function(data) { $scope.dados = data;});
    });
    </script>
</head>
<body>

<div ng-app="myApp" ng-controller="heroisCtrl">
<table>
  <tr>
    <td>{{ dados.name }}</td>
    <td>{{ dados.greeting }}</td>
  </tr>
</table>
</div>

</body>
</html>