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
– casraf, Commented Sep 11, 2016 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
– user1411837, Commented Sep 11, 2016 at 12:04
@user1411837 apologies, do you have collcetion inside response.image? — Pankaj Parkar
– Pankaj Parkar, Commented Sep 11, 2016 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
– Shankar Shastri, Commented Sep 11, 2016 at 12:24

Zakaria · Accepted Answer · 2016-09-11 11:30:00Z

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, 2016 at 11:30

Zakaria

15.1k22 gold badges86 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1411837 Over a year ago

Thanks But sorry that didnt make any difference

scniro · Accepted Answer · 2016-09-11 12:10:34Z

0

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;
    });

answered Sep 11, 2016 at 12:10

scniro

17k8 gold badges67 silver badges108 bronze badges

Comments

Darin Cardin · Accepted Answer · 2016-09-11 12:12:53Z

0

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\"}]}"

answered Sep 11, 2016 at 12:12

Darin Cardin

7571 gold badge4 silver badges10 bronze badges

Collectives™ on Stack Overflow

AngularJS - Not firing / fetching Http Request at all

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related