CODEWITHSUNDEEP
angularjs
Laura
Laura

Reputation: 278

AngularJS - can't get array from $http to show in ng-repeat, only individual item e.g. [0]

I'm VERY new at angular (so, apologies if the language I'm using is wrong) and I'm trying to pull in info from the Stack Overflow API. The data is pulling in when I specify an individual item, however I want to pull in the top 10 questions into an ng-repeat and it's returning undefined. What am I doing wrong?

Thanks!

Scope:

var loadFeed = angular.module('loadFeed', []);

loadFeed.controller('feedController', ['$scope', '$http', function($scope, $http) {

$scope.questions = [];

$http({
    method: 'GET',
    url: 'https://api.stackexchange.com/2.2/questions?pagesize=10&order=desc&sort=votes&tagged=angular&site=stackoverflow'
}).then(function(feed) {

    console.log('success');
    console.log(feed);

    //$scope.questions = feed.data.items;   -- This doesnt work?
    $scope.questions = feed.data.items[0];  // This is working but obviously only shows the first item

    console.log($scope.questions); // Returns data
    console.log($scope.questions.title); // Returns title of question


},function(error) {
    console.log('error');
    console.log(error);
});

}]);

HTML:

<div id="container" ng-app="loadFeed" ng-controller="feedController">

        <h1><span>Top 10 </span>Angular Questions</h1>

        <div id="feed">
            <ng-repeat="question in questions" ng-show="!questions.length">
                <div class="question-list">
                    <h2><a href="{{questions.link}}" title="{{questions.title}}" target="_blank">{{questions.title}}</a></h2>  
                    <div class="details"><div class="owner"><div class="image"><a href="{{questions.owner.profile_image}}" title="View {{questions.owner.display_name}}" target="_blank"><img src=""/></a></div>
                <a class="name" href="{{questions.owner.link}}" title="View {{questions.owner.display_name}}" target="_blank">{{questions.owner.display_name}}</a><span class="rep" title="Reputation Score"><span class="fa fa-star-o"></span> {{questions.owner.reputation}}</span></div>
                <div class="created" title="Date asked"><span class="fa fa-calendar"></span>{{questions.creation_date}}</div></div><div class="is-answered">{{questions.answer_count}} answers<span class="triangle"></span></div>
                </div>  


            </ng-repeat>

        </div>
    </div>

Upvotes: 0

Views: 49

Answers (2)

Akash KC
Akash KC

Reputation: 16310

You can specify limitTo filter in ng-repeat itself by doing :

<div ng-repeat="question in questions | limitTo:10" ng-show="questions.length > 0">

Note : You are using angular directive i.e. ng-repeat as html tag which does not work. Change your ng-show="!questions.length" to ng-show="questions.length > 0"

In this way, you can set all questions in $scope.questions and display the limited number of questions by using limitTo filter.

Looking in your code, you need to make some changes :

In your controller, update to this code :

$scope.questions = feed.data.items;

In your HTML,

<div ng-repeat="question in questions | limitTo:10" ng-show="questions.length > 0">
        <div class="question-list">
            <h2><a href="{{question.link}}" title="{{question.title}}" target="_blank">{{question.title}}</a></h2>  
            <div class="details"><div class="owner"><div class="image"><a href="{{question.owner.profile_image}}" title="View {{question.owner.display_name}}" target="_blank"><img src=""/></a></div>
            <a class="name" href="{{question.owner.link}}" title="View {{question.owner.display_name}}" target="_blank">{{question.owner.display_name}}</a><span class="rep" title="Reputation Score"><span class="fa fa-star-o"></span> {{question.owner.reputation}}</span></div>
            <div class="created" title="Date asked"><span class="fa fa-calendar"></span>{{question.creation_date}}</div></div><div class="is-answered">{{question.answer_count}} answers<span class="triangle"></span></div>
        </div>     
</div>

Upvotes: 1

Meligy
Meligy

Reputation: 36604

Maybe ng-show is the issue.

It says ng-show="!questions.length", which would only show if the length is falsy (0 or null or undefined etc), because it has a "not" operator !.

It works for items[0] because it has no length, so !questions.length becomes truthy.

It does not work for the actual array with non-zero items in it because length exists and is higher than 0, so !questions.length is falsy.

You probably mean !!questions.length (note that's !! not just !).

Also, inside the ng-repeat tag (in the child tags), you should be using question not questions.

Like:

<div class="question-list">
  <div ng-repeat="question in questions" ng-show="!!questions.length">
    <h2>
      <a ng-href="{{question.link}}" title="{{question.title}}" target="_blank">{{question.title}}</a>
    </h2>
    <div class="details">
      <div class="owner">
        <div class="image">
          <a ng-href="{{question.owner.profile_image}}" title="View {{question.owner.display_name}}" target="_blank">
            <img src="" />
          </a>
        </div>
        <a class="name" ng-href="{{question.owner.link}}" title="View {{question.owner.display_name}}" target="_blank">{{question.owner.display_name}}</a>
        <span class="rep" title="Reputation Score">
          <span class="fa fa-star-o"></span> {{question.owner.reputation}}</span>
      </div>
      <div class="created" title="Date asked">
        <span class="fa fa-calendar"></span>{{question.creation_date}}</div>
    </div>
    <div class="is-answered">{{question.answer_count}} answers
      <span class="triangle"></span>
    </div>
  </div>
</div>

P.S.

I changed all <a href="{{...}}" to <a ng-href="{{...}}" in the above code. Here's the documentation on why. Also used ng-repeat as an attribute just again to be writing like the docs.

Upvotes: 1

Related Questions