current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

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");
            });
    };
});
share|improve this question
    
What is the error you're getting in console? – Tushar Jul 6 '15 at 11:45
    
Also ng-repeat="image in images" to ng-repeat="image in data" – Icycool Jul 6 '15 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 Jul 6 '15 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 Jul 6 '15 at 12:18
up vote 1 down vote accepted

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;

share|improve this answer
    
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. – smither123 Jul 6 '15 at 12:39
1  
@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 – kiswa Jul 6 '15 at 12:43
up vote 1 down vote

Please change

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

instead of

ng-src="{{images}}"

share|improve this answer
    
Change <img ng-src="{{images}}" width="100%" /> to <img ng-src="{{image}}" width="100%" /> ?? – smither123 Jul 6 '15 at 12:05
    
@smither123 you are looping images with ng-repeat and image is the value. – I'm nidhin Jul 6 '15 at 12:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.