HTTP.GET isn't loading?

ionic-v1
1

I’m trying to load an image from a HTTP.GET request but it isn’t working.

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

3

Well, a couple of issues here.

One, you defined a scope function in your controller:

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

… But you don’t actually call it anywhere. Comment out the function from around it and the HTTP request sends fine.

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

The response you are getting back is not going to do much with the code you have there though. I also don’t suggest doing your HTTP call right in the controller.

May I suggest some reading material?

4

@beefman I found several errors:

ng-repeat="data in data"

It means nothing it should be “image in data” or whatever you want, image is the item and data is the list that should be populated by your controller $scope.data

<a class="item item-list-detail">

Why a link here? And without href.

Why not using ion-list and ion-item directives?

There are other issues and as @andrewmcgivery said, I think you need to learn more. First angular then ionic, don’t try to learn both at same time, you’ll get lost as here and you’ll find more help about angular on stackoverflow than in a dedicated ionic forum.

5

Thank you. Got it working. http://codepen.io/beefman/pen/BNPwJm :slight_smile:

6

Thank you. I was following a tutorial for an image gallery and it told me to use <a class="item item-list-detail">. I will do. I would like the list to open in a another page when the top header part is clicked.

Also, one last question. If i wanted to add an array to my json file like this: http://paste.ofcode.org/u5MLDGaaWkq4fdSeaPvC5Y

How would i reference it in my HMTL?? staff.image.image or just staff.image??

7

Assuming that the JSON response comes into ‘data’, you could iterate on it like this:

ng-repeat="image in data.staff" ng-src="{{image.image}}"

So for readability, I’d do it like this:

ng-repeat="member in data.staff" ng-src="{{member.image}}"

If you think that you iterate on staff members.

8

Also depending on what you want to do in showImages() you could pass it the whole object rather than $index

ng-click="showImages(member)"