Images not loading from my json file

Question

I'm trying to load images from my json file into my application. Here is a code pen: http://codepen.io/beefman/pen/QbBdVw

Here's my code:

js:

.controller('photoCtrl', function($scope, $ionicModal, $ionicBackdrop, $ionicScrollDelegate, $ionicSlideBoxDelegate, $http) {
   $scope.images = [];

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

html:

<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" >

  <ion-content ng-init="getImages()" class="center" class="has-header padding">

    <!-- start Under6/7/8/9s Photos -->
    <div class="item item-divider">
      <i class="ion-images"></i> Under6/7/8/9s Photos
    </div>
    <a class="item item-list-detail">
      <ion-scroll direction="x">
        <img on-hold="onHold()" ng-repeat="image in images" ng-src="{{images.src}}" ng-click="showImages($index)" class="image-list-thumb" />
      </ion-scroll>
    </a>
</ion-content>
</ion-view>

paul · Accepted Answer · 2015-07-20 14:09:07Z

You were missing brackets and semicolons in your code.

Use a coding environment to check your syntax, or implement JSHint, which is a tool that checks your code.

http://codepen.io/anon/pen/bdjXYE

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
    $ionicConfigProvider.navBar.alignTitle('center');

    $stateProvider

        .state('tabs', {
            url: "/tabs",
            abstract: true,
            templateUrl: "tabs.html"
        })

        .state('tabs.announcement', {
            url: '/announcement',
            views: {
                home: {
                    templateUrl: 'announcement.html',
                    controller: 'photoCtrl'
                }
            }
        })

    $urlRouterProvider.otherwise('/tabs/announcement');

})

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

    $scope.data = [];

    // $scope.getImages = function() {
    console.log("trying to load JSON");
    $http.get('https://api.myjson.com/bins/1jovy')
        .success(function(data) {
            $scope.data = data;
            console.log(data);
        })
        .error(function(error) {
            console.log(error)
        });
});

Collectives™ on Stack Overflow

Images not loading from my json file

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related