1

I want to render a table adding row per each objects in an array.

I got a Controller like:

app.controller('SignUpController',function ($scope, $http) {

    var that = this 


    that.users = []


    that.queryUsers = function() {
        console.log("I'm being triggered")

        $http.get("/existingUsers").

        success(function (data,status,headers,config) {
            console.log(data)
            that.users = data
            console.log(that.users)
        }).

        error(function (data,status, headers, config) {
            console.log(status)
        })
    }

})

And the table markup:

<table class="table table-bordered">
        <th ng-repeat="th in ['mail','Administrador','Miembro desde']">{{th}}</th>

        <tr ng-repeat="p in signup.users">
            <td>{{p._id}}</td>
            <td>{{p.mail}}</td>
            <td>{{p.admin}}</td>
        </tr>

</table>

Ttable is within a div with ng-controller="SignUpController as signup". When I click a button I trigger queryUsers actually seein results in browser console:

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

Both mail and _id are existing attributes per each object.

So the AJAX is being done and the array I should be iterating and rendering to HTML rows actually exists and is populated, but no rows are shown.

Why?

Edit

I tried not modifying the scope:

app.controller('SignUpController', function ($scope,$http) {

    $scope.users = []

    $scope.queryUsers = function() {
        
        console.log("I'm being triggered")

        $http.get("/existingUsers").

        success(function (data,status,headers,config) {
            console.log(data)
            $scope.users = data
            console.log($scope.users)
        }).

        error(function (data,status, headers, config) {
            console.log(status)
        })
    }

})


<div class="tab-pane" id="usecase11" ng-controller="SignUpController">
    
        <h3>Colaboradores</h3>

        <div class="row">
            
            <div class="col-sm-6">
                
                <table class="table table-bordered">
                        <th ng-repeat="th in ['mail','Administrador','Miembro desde']">{{th}}</th>

                        <tr ng-repeat="p in users">
                            <td>{{p._id}}</td>
                            <td>{{p.mail}}</td>
                            <td>{{p.admin}}</td>
                            <td style="border:none;"><a class="close" ng-click="">$</a></td>
                            <td style="border:none;"><a class="close" ng-click="">*</a></td>
                        </tr>

                </table>
            </div>
        </div>
</div>

However, again I can see such array printed at browser console but nothing rendered to HTML

Here is the evidence that queryUsers is being called and that $scope.users is getting something after it.

enter image description here

Something interesting is that I got: {{users}} right after the table and it's displaying an empty array.

enter image description here

Just in case this is the GET handling server code:

app.get('/existingUsers',function (request, response) {

    
    membersCollection.find({},{"password":0}, function (err, data) {

        if (err) response.send(404)
        
        else {
            
            data.toArray(function (err, docs) {
                if (err) {
                    
                    console.log(error)
                    response.send("Error")
                }

                response.send(JSON.stringify(docs, null, 4))
            })
        }
    })
}
4
  • It should be: $scope.users = []; and $scope.queryUsers = function(){...}; Commented Jun 10, 2014 at 17:09
  • and ng-repeat="p in users" Commented Jun 10, 2014 at 17:11
  • Did the whole changes you propose, not working Commented Jun 10, 2014 at 17:13
  • could you make a jsfiddle or something? Commented Jun 10, 2014 at 17:15

1 Answer 1

2

You don't modify the $scope. Here is the corrected code:

app.controller('SignUpController',function ($scope, $http) {

    $scope.users = []

    $scope.queryUsers = function() {
        console.log("I'm being triggered")

        $http.get("/existingUsers").

        success(function (data,status,headers,config) {
            console.log(data)
            $scope.users = data
            console.log($scope.users)
        }).

        error(function (data,status, headers, config) {
            console.log(status)
        })
    }

})

HTML:

<table class="table table-bordered">
    <th ng-repeat="th in ['mail','Administrador','Miembro desde']">{{th}}</th>

    <tr ng-repeat="p in users">
        <td>{{p._id}}</td>
        <td>{{p.mail}}</td>
        <td>{{p.admin}}</td>
    </tr>

</table>
Sign up to request clarification or add additional context in comments.

1 Comment

I did exactly the same as you suggest but it's not working. I'm editing my question now ..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.