CODEWITHSUNDEEP
angularjs
Harshit
Harshit

Reputation: 286

Not able to fetch json (api) data through angular.js

I'm not able to fetch data through angularjs, it shows blank screen on chrome while running it, don't know the issue since I'm a beginner.

<div ng-app="myApp" ng-controller="customersCtrl"> 
  <ul>
    <li ng-repeat="x in names">
      {{Word}}{{names}}
    </li>
  </ul>
  <div class="footer"></div>
</div>

Here is the jsfiddle: demo

Thanks in advance.

Edit:Finally, I got the solution, after trying for couple of hours,needed to get CORS extension from chrome:working demo

Upvotes: 0

Views: 621

Answers (1)

Lee.Winter
Lee.Winter

Reputation: 710

'Access-Control-Allow-Origin' - Cross Origin Requests don't seem to be allowed for your resource API

Updating your request you can add an error response in to catch such problems

$http.get("http://randomword.setgetgo.com/get.php")
  .then(function (response) {
    $scope.names = response.data;
    console.log(response);
  },
       function(error){
    console.log('error',error);    
  });

edit: No idea who marked this down but I changed the api call to one which allows cors and made a fiddle to show it working.

dom

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

    <ul>
      <li ng-repeat="x in names.data">
        {{x.title}}
      </li>
    </ul>
            <div class="footer"></div>
    </div>

Controller

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://jsonplaceholder.typicode.com/posts")
  .then(function (response) {
    console.log(response);
    $scope.names = response;
  }, function(error){
    console.log(error);
  });
});

If your angular app is hosted separately to your API then you will have a little work to allow access.

Upvotes: 1

Related Questions