Angularjs text / data not showing up

Question

I am building a very basic angular app to learn. My app basically loads a list of users and prints them all out on the home page with a checkbox next to each name and also displays the number of present users.

The list of users appears to work - I have 11 users and 11 checkboxes show up. HOWEVER, the actual text doesn't show up. The users.length variable also shows up as empty too.

Here is my core.js file:

var userApp = angular.module('userApp', []);
userApp.controller("mainController", mainController);

function mainController($scope, $http) {
    $scope.formData = [];

    // when landing on the page, get all users and show them
    $http.get('/api/users')
        .success(function(data) {
            $scope.users = data;
            console.log(data);
            console.log(data.length);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });


    // when submitting the add form, send the text to the node API
    $scope.createUser = function() {
        $http.post('/api/users', $scope.formData)
            .success(function(data) {
                $scope.formData = {} //clear the form so our user is ready to enter another user
                $scope.users = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

}

And here is my index.html file:

<html ng-app="userApp">
<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

    <title>Node/Angular Todo App</title>

    <!-- SCROLLS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
    <style>
        html                    { overflow-y:scroll; }
        body                    { padding-top:50px; }
    </style>

    <!-- SPELLS -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
    <script src="core.js"></script>

</head>

<body ng-controller="mainController">

    <div class="container">
        <div class="jumbotron text-center">
            <h1>Users Count: <span class="label label-info"> {{ users.length }}</span></h1>
        </div>

        <div id="user-list" class="row">
            <div class="col-sm-4 col-sm-offset-4">

                <!-- loop over users -->
                <div class="checkbox" ng-repeat="user in users">
                    <label>
                        <input type="checkbox">{{ user.first_name }}
                    </label>
                </div>
            </div>
        </div>

        <!-- create users -->
        <div id="user-form" class="row">
            <div class="col-sm-8 col-sm-offset-2 text-center">
                <form>
                    <div class="form-group">

                        <!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
                        <input type="text" class="form-control input-lg text-center" placeholder="I want to buy a puppy that will love me forever" ng-model="formData.text">
                    </div>

                    <!-- createUser() WILL CREATE NEW USERS -->
                    <button type="submit" class="btn btn-primary btn-lg" ng-click="createUser()">Add</button>
                </form>
            </div>
        </div>



    </div>

</body>

</html>

Sample user record:

{
"id": 1,
"first_name": "Bruce",
"last_name": "Lee",
"email": "[email protected]",
"password": "blee",
"created_at": "2016-01-08T21:49:18.337Z",
"updated_at": "2016-01-08T21:49:18.337Z"
},

The data also properly console.log()'s.

Can someone help?

Thanks in advance!

In your ng-repeat, instead of {{first_name}}, do {{user.first_name}}, {{user.property}}, etc. — jperezov
– jperezov, Commented Jan 8, 2016 at 23:39
@user1547174 Do you mind providing an example of a user record? — Mark
– Mark, Commented Jan 9, 2016 at 0:53

ian park · Accepted Answer · 2016-01-09 00:12:33Z

1

If you want to take over user data to Angular, you should fix {{ first_name }} to {{ user.first_name }} in your html.

It means that each label get name from not globally declared but user.

Moreover you should better register controller in your js code.

in core.js

userApp.controller("mainController", mainController);

answered Jan 9, 2016 at 0:12

ian park

1221 silver badge9 bronze badges

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

1 Comment

Trung Tran Over a year ago

Thanks - I updated my question w/ your suggestion.. still isn't working.

Gustavo Hoirisch · Accepted Answer · 2016-01-09 01:10:37Z

The $http service for angular should return a response object and not the raw data. According to the docs this is what is in this object:

The response object has these properties:

data – {string|Object} – The response body transformed with the transform functions.

status – {number} – HTTP status code of the response.

headers – {function([headerName])} – Header getter function.

config – {Object} – The configuration object that was used to generate the request.

statusText – {string} – HTTP status text of the response. ```

Try assigning data.data to the $scope.users variable like so:

$http.get('/api/users')
    .success(function(data) {
        $scope.users = data.data; // <-------- here!!! (consider calling it response so you can use 'response.data'
        console.log(data);
        console.log(data.length);
    })
    .error(function(data) {
        console.log('Error: ' + data);
    });

Quick edit: it also seems like you are using the old way of doing things (.success and .error). The service returns a promise and you should be consuming it with .then.

Example

$http
    .get('/api/users')
    .then(function(response) {
        $scope.users = response.data;
    }, function(error) {
        console.log('Error: ' + error);
    });

Collectives™ on Stack Overflow

Angularjs text / data not showing up

2 Answers 2

1 Comment

Example

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Example

Comments

Your Answer

Sign up or log in

Post as a guest

Related