Inserting AngularJS values into HTML table is not working

Question

I am sending JSON to AngularJS through Node. I receive the correct data successfully in the controller which I print to the console. But when I try to fill the HTML table with the controller it doesn't work. I noticed that if I use the same fields but with "tasks" instead of "task" it will fill the "status" field into the table since the "tasks" object has a "status" field so the scope is technically working but I have no luck using "task" fields.

Controller

projectApp_TaskList.controller('getTaskListController', function ($scope, $http) {

    $http.get('/getTaskList')
        .then(function (data) {
            $scope.tasks = data;
            console.log($scope.tasks);
        });
});

Table

    <div>
        <table>
            <thead>
                <tr>
                    <td>Priotity</td>
                    <td>Status</td>
                    <td>Title</td>
                    <td>Limit Date</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="task in tasks">
                    <td>{{task.priority}}</td>
                    <td>{{task.status}}</td>
                    <td>{{task.title}}</td>
                    <td>{{task.limitDate}}</td>
                </tr>
            </tbody>
        </table>
    </div>

Here's the link to the data I get on the console.

What does data structure look like? Note the object you call data is a response object and the data you want is in data.data — charlietfl
– charlietfl, Commented Apr 12, 2019 at 17:18
I have added an image to show what I get from the console.log(data);. — Rui Pascoal
– Rui Pascoal, Commented Apr 12, 2019 at 17:22

charlietfl · Accepted Answer · 2019-04-12 17:22:48Z

4

The object returned to $http.get().then is a response object that has multiple properties

The data you want is in a property data of that object

Try

$http.get('/getTaskList')
    .then(function (response) {
        $scope.tasks = response.data;
        console.log($scope.tasks);
    })

answered Apr 12, 2019 at 17:22

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

Rui Pascoal Over a year ago

That worked for me. Thanks for the quick answer and help.

Collectives™ on Stack Overflow

Inserting AngularJS values into HTML table is not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related