CODEWITHSUNDEEP
javascriptangularjs
user3228992
user3228992

Reputation: 1373

AngularJs. Problems with ng-repeat

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"}]

Upvotes: 0

Views: 190

Answers (2)

Mikko Viitala
Mikko Viitala

Reputation: 8394

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

Upvotes: 4

pfooti
pfooti

Reputation: 2704

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.

Upvotes: 1

Related Questions