Using data from API call in Angular.js

Question

After an introduction to Angular.js at CodeSchool via FreeCodeCamp, I am coding a zipline where I have to Stylize Stories on Camper News. Basically, I am making a call to an API and need to display the result.

However, I have difficulties displaying the result of my API call with angular.js. I searched on the web and on StackOverflow and could not find a way to fix my issue.

Here is my app.js:

    (function() {
  var app = angular.module('camperNews', []);

  app.controller('StoryController', ['$http', function($http) {
    var story = this;
    story.news = [];
    $http.get('http://www.freecodecamp.com/news/hot').
    then(function(response) {
      story.news = response;
    }, function(err) {
      console.error('ERR', err);
    });
  }]);
})();

And my HTML:

<body ng-controller="StoryController as story">
    <div id="container" class="text-center">
        <div id="posts" class="text-center" ng-repeat="new in story.news">
            <div class="post">
                <div class="author">
                    <a href="{{new.link}}" target="_blank"><img class="author-picture" src="{{new.author.picture}}"></a>
                </div>
            </div>
        </div>
    </div>
  </body>

I looked in the console and my call is returning something, the problem is obviously in my HTML and caused by my lack of experience. I would help to find a solution or hints on how to fix my issue.

Thank you in advance.

try using story.news=response.data in the .then block.

Claies
– Claies

2015-09-29 01:53:40 +00:00
Commented Sep 29, 2015 at 1:53 — Claies
– Claies, Commented Sep 29, 2015 at 1:53

Miles P · Accepted Answer · 2015-09-29 01:55:38Z

1

You need to change <div id="posts" class="text-center" ng-repeat="new in story.news"> to <div id="posts" class="text-center" ng-repeat="new in story.news.data">.

Alternatively you could change story.news = response; in your controller to story.news = response.data;

answered Sep 29, 2015 at 1:55

Miles P

7104 silver badges12 bronze badges

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

Comments

charlietfl · Accepted Answer · 2015-09-29 01:55:02Z

1

Using then() with $http the callback response argument is a more complex object than just your data ... data is a property of that object:

$http.get('http://www.freecodecamp.com/news/hot').then(function(response) {    
  story.news = response.data;
}, function(err) {
  console.error('ERR', err);
});

answered Sep 29, 2015 at 1:55

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

Jim P. Over a year ago

Thanks for the explanation.

Lior Ben Aharon · Accepted Answer · 2015-09-29 02:04:07Z

Try to run it without the (function(){})()

2.It seems like you're using the $http.get to access an api server with http ajax tool, but you rather use an api client as a part of angular providers.

$resource is a provider made exactly for this kind of usages..

here is factory file (news.factory.js)

angular 
           .module('camperNews')
           .factory('$news',newsFactory);

//Injects strings to function dep.
newsFactory.$injector('$resource');

newsFactory($resource){

var baseUrl = 'http://www.freecodecamp.com/news';

return  
 $resource(baseUrl+'/hot', 
   {/*params dictionary*/},
     /*This is get/post/delete/put and so on customizations..*/
     {get: {method:'GET', params:{}, isArray:true /*i think you get a list..*/}
   );            
}

Here is my app.js:

  angular.module('camperNews', ['$news'/*TODO:Add ng-resource*/]);

  angular 
       .module('camperNews')
       .controller('StoryController', ['$news', function($news) {
    var story = this;
    story.news = [];

/*Will load a resource, with the array 
*and $resolved(bool) and $promise(promise type) and etc..
*/
    story.news = $news.get();
  }]);

And my HTML:

<body ng-controller="StoryController as story">
    <div id="container" class="text-center">
        <div id="posts" class="text-center" ng-repeat="new in story.news">
            <div class="post">
                <div class="author">
                    <a href="{{new.link}}" target="_blank"><img class="author-picture" src="{{new.author.picture}}"></a>
                </div>
            </div>
        </div>
    </div>
  </body>

krishna · Accepted Answer · 2015-09-29 02:07:43Z

0

why don't you use $scope? instead of var story = this; write $scope.story = {}; and $scope.story.news = response; and write ng-controller="statecontroller".

answered Sep 29, 2015 at 2:07

krishna

1527 bronze badges

1 Comment

charlietfl Over a year ago

you use this in controller when using controllerAs alias and syntax in view

Josh Lin · Accepted Answer · 2015-09-29 02:30:09Z

0

in this case $resource service would be better https://docs.angularjs.org/api/ngResource/service/$resource

answered Sep 29, 2015 at 2:30

Josh Lin

2,44514 silver badges21 bronze badges

Collectives™ on Stack Overflow

Using data from API call in Angular.js

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related