AngularJS - Not firing / fetching Http Request at all

Question

I am new to Angular and below is the simple code which should fetch data from the http urls and display :

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

  <div ng-app="myApp" ng-controller="galaxyCtrlA"> 
    <p>The $http service requests responses from the the server on the "Zone of Avoidance" galaxies, and the response are set as the values of the "message" and "pictures" variables.</p>
    <p>Welcome message from the "Zone of Avoidance" galaxies is:</p>
       <h1>{{ message }}</h1>

    <p>The pictures from the "Zone of Avoidance" are:</p>
     <ul>
      <br/>
      <li ng-repeat="p in pictures">
        <img src="{{ p.image }}" alt="{{ p.image }}" width="60%" />
      </li>
    </ul>
  </div>

  <script>
  var app = angular.module('myApp', []);

  app.controller('galaxyCtrlA', function($scope, $http) {
    $http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/welcome.html")
    .then(function(response) {
        $scope.message = response.data;
    });

    $http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/picture-list.json")
    .success(function(response) {
       $scope.pictures = response.image;
    });
  });

  </script>

</body>
</html>

The output for the above should be pretty simple but i get a blank page , no errors at all .

Kindly advice what's going wrong

Is this also the domain you're using? Also looking at the files, looks like `response.image` would be empty — casraf, Sep 11 '16 at 11:37
Before marking this as duplicate kindly understand what i am asking and if the output are the same rather than trying to act too smart . @Pankaj Parkar — user1411837, Sep 11 '16 at 12:04
@user1411837 apologies, do you have collcetion inside `response.image`? — Pankaj Parkar, Sep 11 '16 at 12:09
CORS Need to be enabled from the server side and The second http request is returning you just the image name in text i guess. — Shankar Shastri, Sep 11 '16 at 12:24
Are you still struggling with this one? Please share an update when you can — scniro, Oct 12 '16 at 13:52

score 1 · Answer 1 · answered Sep 11 '16 at 12:10

That endpoint does not return an object with an .image property, but is instead an array of objects each with that property.

[ { image: "/AngularJS/files/httpRequest/Stills_Cam-4_Frame-1300_adjusted.jpg" }, { image: "/AngularJS/files/httpRequest/14-scientistsdi.jpg" } ]

Try instead assigning your $scope object to the response.data object property. Also note that .success is deprecated in favor of .then

$http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/picture-list.json")
    .then(function(response) {
       $scope.pictures = response.data;
    });

score 0 · Answer 2 · answered Sep 11 '16 at 11:30

0

The problem is with the second request. It should be :

$http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/picture-list.json")
    .success(function(response) {
       $scope.pictures = response;
    });

answered Sep 11 '16 at 11:30

Zakaria

14,892
22
84
125

Thanks But sorry that didnt make any difference – user1411837 Sep 11 '16 at 11:33

score 0 · Answer 3 · answered Sep 11 '16 at 12:12

It is not parsing the json in my test. Does this work?

$http.get("picture-list.json").success(function(response) {

    var data = JSON.parse(response);
    $scope.pictures = data.image;
});

Here is a json string that i know is working: "{\"image\":[{\"image\":\"url.jpg\"}]}"

AngularJS - Not firing / fetching Http Request at all

3 Answers3