Ionic app - controller $http

Question

I am building a app in ionic, i am trying to get external restful api data into the view via a controller, but there seems to be something wrong with my controller because nothing is being pulled in?

my code is:

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

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller('myCtrl', function($scope, $http) {
$http.get('http://jsonplaceholder.typicode.com/posts').then(function(results){
  $scope.posts = results.data.posts;
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  })
});

 <ion-content class="has-subheader" ng-controller="myCtrl">
      <ion-list>
        <ion-item ng-repeat='item in posts' class="item-thumbnail-left item-text-wrap">
          <img src="http://placehold.it/100x100" alt="photo">
          <h2>{{post.title}}</h2>
          <h4>Place</h4>
          <p style="font-size:12px; line-height:16px;">Quisque quis sem a velit placerat vehicula quis nec felis. Mauris posuere, nisl vitae condimentum luctus, tellus enim blandit orci, quis efficitur nibh libero eget dui. Aliquam fermentum velit quis sem molestie.</p>

        </ion-item>
      </ion-list> 
    </ion-content>

Any help would be appreciated.

Why don't you use .success ?

carton
– carton

2015-06-10 11:51:28 +00:00
Commented Jun 10, 2015 at 11:51 — carton
– carton, Commented Jun 10, 2015 at 11:51
can you elaborate pls, i am pretty new to angular JS?

Sole
– Sole

2015-06-10 11:52:01 +00:00
Commented Jun 10, 2015 at 11:52 — Sole
– Sole, Commented Jun 10, 2015 at 11:52
how do I add that so that you can run code within question?

J86
– J86

2015-06-10 13:46:01 +00:00
Commented Jun 10, 2015 at 13:46 — J86
– J86, Commented Jun 10, 2015 at 13:46

Sole · Accepted Answer · 2015-06-10 13:42:49Z

1

Solution to this:

$http.get('http://jsonplaceholder.typicode.com/posts')
.success(function(results){
    $scope.posts = results.posts;
    console.log($scope.posts);
});

You were using data but there isn't data in the results. Look at the console, and you should see objects now.

Working codepen

edited Jun 10, 2015 at 13:42

Sole

3,34819 gold badges74 silver badges136 bronze badges

answered Jun 10, 2015 at 11:55

carton

1,1689 silver badges17 bronze badges

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

2 Comments

Sole Over a year ago

where abouts are you putting that, becuase that does not work for me?

Sole Over a year ago

Update: the html part is slightly wrong, it needs to read: <h2>{{item.title}}</h2> not with <h2>{{post.title}}</h2>

Mohamad Al Asmar · Accepted Answer · 2015-06-11 12:51:41Z

0

you have made 2 mistakes in your code:

First: once you define 'item' in ng-repeat you should use it to bind your object key "title":

ng-repeat='item in posts'

'item' is now holding your JSON keys.

<h2>{{item.title}}</h2>

Second: reviewing jsonplaceholder JSON you are calling through this url, http://jsonplaceholder.typicode.com/posts, title key is under results.data , so you should define posts like this:

$scope.posts = results.data

For more help: I've taken the code you provided and made it working on a plunk, check it on the following url: http://embed.plnkr.co/Gp1U3y/preview

Please contact me for more help. Thanks

answered Jun 11, 2015 at 12:51

Mohamad Al Asmar

1,1871 gold badge17 silver badges36 bronze badges

1 Comment

Mohamad Al Asmar Over a year ago

Would you please consider marking my answer as correct and give it a vote up. You are welcome :D

Collectives™ on Stack Overflow

Ionic app - controller $http

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related