Search code examples
angularjsangularjs-ng-repeatreddit

ng-repeat only showing 2 elements of array


The ng-repeat is only showing the first 2 elements of the array (there are 25). What is wrong?

I'm a newbie with Angular. I am lost with the cause of it, no errors in console. Any suggestions?

<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
    <li ng-repeat="post in posts" track by $index>
        <p>{{posts.data.children[$index].data.ups}}</p>
        <p>{{posts.data.children[$index].data.title}}</p>
    </li>

</div>


<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        var vm = this;
        vm.mydata = [];

        $http.get("http:/www.reddit.com/.json")
            .then(function(response) {
                vm.mydata = response.data;
                $scope.posts = vm.mydata;
                //console.log(vm.mydata);
                //console.table(vm.mydata);

            }, function(response) {
                $scope.posts = "Something went wrong";
            });
    });
</script>

Final code corrected. This is a very basic script to manage the extraction of posts in the Reddit's front page and displayed it in descending order by upvotes. Thank you all for your help! See code below:

    <!DOCTYPE html>
<html>
<!-- _________________________________________________________-->
<!--  Framework:    AngularJs                                 -->
<!--  Author:       Vanessa Torres                            -->
<!--  Date:         March 30, 2016                            -->
<!--  Description:  Reddit's Front page posts extraction      -->
<!-- _________________________________________________________-->

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
    <div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
        <li ng-repeat="post in posts.data.children | orderBy:'-data.ups'" track by $index>
            <p>{{post.data.ups}}</p>
            <p>{{post.data.title}}</p>
            <p>{{post.data.url}}</p>
        </li>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $http) {
            $scope.posts = [];

            $http.get("http:/www.reddit.com/.json")
                .then(function(response) {
                    $scope.posts = response.data;
                    console.table(vm.mydata);
                    // 
                }, function(response) {
                    $scope.posts = "Something went wrong";
                });
        });
    </script>
</body>

</html>

Solution

  • Because you are iterating over posts which have basically two properties only ups and title

    Use:

       <li ng-repeat="post in posts.data.children" track by $index>
            <p>{{post.data.ups}}</p>
            <p>{{post.title}}</p>
        </li>