AngularJs. Problems with ng-repeat

Question

I'm having two tables witch renders data trough angularJs, coming from 2 c#-methods. The tables are structured almost exactly the same. The first one below is used as I searchfield and the other one is used basiclly to render names. My problem is that the first one works perfect, but the other one does not. And I don't see the problem. Any help would be appreciated. // Thanks!

Here are my two tables. (the first one is working)

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
            <div ng-app="searchApp">
                <div ng-controller="searchController">

                    @*first table works*@
                    <span style="color: white">Search:</span> <input data-ng-click="myFunction()" ng-model="searchText">
                    <table style="color: white" id="searchTextResults">
                        <tr><th>Name</th></tr>
                        <tr ng-show="!!searchText.length != 0" ng-repeat="friend in friends | filter:searchText">
                            <td data-id="{{friend.id}}" data-ng-click="SendFriendRequest(friend.id)">{{friend.id.replace("RavenUsers/","")}}</td>
                        </tr>
                    </table>



                    @*Does not work*@
                    <input type="button" value="Get friends requests" data-ng-click="GetFriendRequests()">
                    <table style="color: white">
                        <tr><th>Friend requests</th></tr>
                        <tr ng-repeat="friendRequest in friendRequests">
                            <td data-id="{{friendRequest.UserWhoWantsToAddYou}}" data-ng-click="acceptUserRequest(friendRequest.UserWhoWantsToAddYou)">{{friendRequest.UserWhoWantsToAddYou}}</td>
                        </tr>
                    </table>
                </div>
            </div>

HERE IS MY SCRIPT

                <script>
                var App = angular.module('searchApp', []);

                App.controller('searchController', function ($scope, $http) {

                    //Get all users to the seachFunction
                    $scope.myFunction = function () {
                        var result = $http.get("/Home/GetAllUsersExeptCurrentUser");
                        result.success(function (data) {

                            $scope.friends = data;

                        });
                    };


                    //Get friendRequests from other users
                    $scope.GetFriendRequests = function () {
                        var result = $http.get("/Home/GetFriendRequests");
                        result.success(function (data) {

                            $scope.friendRequests = data;


                        });
                    };
                });

            </script>

The first script-function called myFunction works perfect and the data coming from my c#-method looks like this:

[{"id":"RavenUsers/One"},{"id":"RavenUsers/Two"},{"id":"RavenUsers/Three"}]

The second script-function called GetFriendRequests does not work, and as far as I can see there is no difference between this data passed into here than the data passed into myFunction:

[{"userWhoWantsToAddYou":"RavenUsers/Ten"},{"userWhoWantsToAddYou":"RavenUsers/Eleven"}]

Shot in the dark, cause I haven't tried it... but try the second http call with something like result2 instead of result and report back please. — veroxii
– veroxii, Commented Aug 17, 2014 at 22:13

Mikko Viitala · Accepted Answer · 2014-08-18 06:12:03Z

4

I'd suggest you use then instead of success because $http returns a promise.

If your table doesn't "render" then put a breakpoint inside success function, console.log() the data or check friendRequests inside your HTML template, e.g. using <div>{{ friendRequests | json }}</div>, to ensure you actually got data from response.

Now you do not handle exceptions at all.

Example:

result.then(function(data) {
    console.log('got data')
  },function(error) {
    console.log('oh noes :( !');
});

Related plunker here http://plnkr.co/edit/KzY8A3

edited Aug 18, 2014 at 6:12

answered Aug 17, 2014 at 22:33

Mikko Viitala

8,4044 gold badges42 silver badges62 bronze badges

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

4 Comments

user3228992 Over a year ago

how do I pass my data into $scope.friends = data; Like this, it doesn't work: $scope.friends = [{"id":"RavenUsers/One"},{"id":"RavenUsers/Two"},{"id":"RavenUsers/Three"}]; Thank you

user3228992 Over a year ago

Actully when I added the <div>{{ friendRequests | json }}</div> I've got my correct data. So I got the response. What can be wrong then?

user3228992 Over a year ago

Thanks for your post, it is working now. I followed your instructions and got it working. The problem was under my tryouts, I still had the track by userWhoWantsToAddYou the advice @pfooti gave me (thanks anyway @pfooti, it was my misstake to left it in there). And thank you @Mikko Viitala

user3228992 Over a year ago

Thanks! I will use Plunker from now =)

pfooti · Accepted Answer · 2014-08-17 22:12:51Z

1

It would be helpful if you either (a) provided a plunker to your code or (b) provided the error message.

ng-repeat requires a uniquificator on each item in the repeat, which defaults to item.id. If you don't have an id field on the item, you'll need to tell angular what field to use.

https://docs.angularjs.org/api/ng/directive/ngRepeat

So I'd suggest changing

<tr ng-repeat="friendRequest in friendRequests">

to

<tr ng-repeat="friendRequest in friendRequests track by userWhoWantsToAddYou">

and see if that works.

answered Aug 17, 2014 at 22:12

pfooti

2,7344 gold badges27 silver badges40 bronze badges

3 Comments

Mikko Viitala Over a year ago

Again, make a plunk out of it w/ mock data and I bet you figure it out yourself. If not then it'll be that much easier for anyone to help out.

user3228992 Over a year ago

@MikkoViitala I've never tried plunker before. Did one try now but than nothing worked, sorry.

Mikko Viitala Over a year ago

See if my updated answer help you. If not, then you can always "fork" simple plunks to get you going, e.g. here plnkr.co/edit/susiRn

Collectives™ on Stack Overflow

AngularJs. Problems with ng-repeat

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related