Angularjs issue $http.get not working

Question

I'm creating a mobile application using the framework ionic which is built on AngularJS.

I'm trying to load an image into my application from a JSON file but I cannot get it to load correctly.

Could anybody help me out?

Here's my HTML:

<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
    <ion-content>
        <div class="col col-25" ng-repeat="image in images">
            <img ng-src="{{images}}" width="100%" />
        </div>
    </ion-content>
</ion-view>

Here's my javascript:

.controller("photoCtrl", function($scope, $http) {     
    $scope.data = [];

    $scope.getImages = function() {
        $http.get('https://api.myjson.com/bins/30vuu')
            .success(function(data) {
                $scope.data = data;
            })
            .error(function() {
                alert("Not working");
            });
    };
});

Also ng-repeat="image in images" to ng-repeat="image in data" — Icycool
– Icycool, Commented Jul 6, 2015 at 11:47
I'm not getting any errors in the console. I've changed image to data and still can't get it to work. Should it be images in data? — smither123
– smither123, Commented Jul 6, 2015 at 12:06
@smither123 @Icycool - It's ng-repeat="image in data.images" but only if the API return is fixed. See my answer below. — kiswa
– kiswa, Commented Jul 6, 2015 at 12:18

kiswa · Accepted Answer · 2015-07-06 12:11:53Z

1

There are several issues here. First, your API call returns an object with a single property called images (not an array). Second, you're not accessing it in your HTML because that would be {{ data.images }} since your $scope member is called data.

So, the first thing you need to do is have the API return an array. If you do that, then use this HTML:

<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
    <ion-content>
        <div class="col col-25" ng-repeat="image in data.images">
            <img ng-src="{{image}}" width="100%" />
        </div>
    </ion-content>
</ion-view>

And this JavaScript:

.controller("photoCtrl", function($scope, $http) {
    $scope.getImages = function() {
        $http.get('https://api.myjson.com/bins/30vuu')
            .success(function(data) {
                $scope.data = data;
            })
            .error(function() {
                alert("Not working");
            });
    };
});

If you only want your API to return one image then it's as simple as this for the HTML:

<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
    <ion-content>
        <div class="col col-25">
            <img ng-src="{{ data.images }}" width="100%" />
            <!-- data.images because that's the name returned by the API call -->
        </div>
    </ion-content>
</ion-view>

The JavaScript doesn't need to change from what I have above;

answered Jul 6, 2015 at 12:11

kiswa

15.1k1 gold badge23 silver badges30 bronze badges

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

2 Comments

smither123 Over a year ago

Thanks for the reply. I have created a codepen: codepen.io/beefman/pen/KpoNjz I still cannot get it to work. I would like the api to return many images but this is just an example json.

kiswa Over a year ago

@smither123 That's because your API call still returns an object with a property called images that is a string and not an array. codepen.io/anon/pen/GJxrob

Vineet · Accepted Answer · 2015-07-06 11:46:53Z

1

Please change

<img ng-src="{{image}}" width="100%" />

instead of

ng-src="{{images}}"

answered Jul 6, 2015 at 11:46

Vineet

4,7153 gold badges25 silver badges42 bronze badges

2 Comments

smither123 Over a year ago

Change <img ng-src="{{images}}" width="100%" /> to <img ng-src="{{image}}" width="100%" /> ??

I'm nidhin Over a year ago

@smither123 you are looping images with ng-repeat and image is the value.

Collectives™ on Stack Overflow

Angularjs issue $http.get not working

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related