Angularjs issue $http.get not loading image

Question

I'm trying to create an ionic application which uses a gallery. I'm unsure why my image isn't being loaded into the application.

What i'm trying to develop is an gallery which loads the images from a JSON file.

Here's my HTML

<ion-view view-title="Gallery" align-title="center">

<ion-content ng-controller="photoCtrl" ng-init="getImages()">
    <div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
        <div class="col col-25" ng-if="$index < images.length">
            <img ng-src="{{data.images[$index].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 1 < images.length">
            <img ng-src="{{data.images[$index + 1].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 2 < images.length">
            <img ng-src="{{data.images[$index + 2].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 3 < images.length">
            <img ng-src="{{data.images[$index + 3].src}}" width="100%" />
        </div>
    </div>
</ion-content>
</ion-view>

Javascript:

.controller("photoCtrl", function($scope, $http) {

    $scope.images = [];

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

});

I have also created a codepen: http://codepen.io/beefman/pen/eNMgzG

Answer 1

The JSON API return an associative array (key-value pair) like this:

{"images":"http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg"}

but your template code expects an array (list):

data.images[$index].src

so I would start by matching your JSON with the format expected by your template.

Edit: Here's a JSON format that would match your template's expectations:

{'images': [{'src': 'url1'}, {'src': 'url2'}]}

Also, make sure to set the images variable properly in your callback

$scope.images = data.images

now $scope.images is a list of key value pairs

with ng-repeat you can display the images like so:

<div ng-repeat="image in images">
  <img ng-src="image.src" />
</div>

Answer 2

Your controller should be like this

.controller("photoCtrl", function($scope, $http) {

    $scope.images = [];

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

});