Angular - Data Returned But ng-repeat Not Displaying It

Question

I'm having an issue where although my Angular JS is returning data from my backend, I can't get ng-repeat to display it. Here's my HTML file:

<!DOCTYPE html>
<html ng-app="docManager">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="DocManCtrl as docs">
    <div>
        <input placeholder="Search" type="text" ng-model="searchKey" />
    </div>
    <table class="table">
        <tr><th>Document ID</th><th>Filename</th><th>Category</th></tr>
    <tr ng-repeat="document in docs.documents | filter:searchKey">
        <td>{{document.id}}</td>
        <td>{{document.filename}}</td>
        <td>{{document.category}}</td>
    </tr>
</table>
<button ng-click="docs.add()">Add Document</button>
</body>

And here is my JS file:

var app = angular.module('docManager', []);
app.controller('DocManCtrl', DocManCtrl);

function DocManCtrl($http){
    $http.get('http://localhost:3000/documents').success(function(data){
    this.documents = data;
    console.log('Data retrieved.');
    }).error(function(){
    console.log('Error: could not GET documents');
    });
} 

DocManCtrl.prototype.add = function(){
console.log('Hello, world.');
};

I know my $http.get is working, because if I print out the contents of 'data' to the console, I see the data from my database. Anybody know where my mistake is?

Thanks! Bryan

rob · Accepted Answer · 2015-05-22 18:38:53Z

4

When you use this in your callback function it doesn't refer to your controller. So you'd have to do something like this:

function DocManCtrl($http) {
    var self = this;

    $http.get('http://localhost:3000/documents').success(function (data) {
        self.documents = data;
    });
}

answered May 22, 2015 at 18:38

rob

18.7k13 gold badges73 silver badges95 bronze badges

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

2 Comments

Bryan Green Over a year ago

Dang it...rookie mistake. :) Thanks, Rob!

AndreaM16 Over a year ago

@rob I don't know if this is a bit off-topic but, would you mind about give a look to link ? I got a problem and I think it's pretty close to this one.

Riad Baghbanli · Accepted Answer · 2015-05-22 18:56:31Z

1

var app = angular.module('docManager', []);
app.controller('DocManCtrl', DocManCtrl);

function DocManCtrl($http){
    var vm = this;
    $http.get('http://localhost:3000/documents').success(function(data){
    vm.documents = data;
    console.log('Data retrieved.');
    }).error(function(){
    console.log('Error: could not GET documents');
    });
} 

DocManCtrl.prototype.add = function(){
console.log('Hello, world.');
};

answered May 22, 2015 at 18:56

Riad Baghbanli

3,3461 gold badge17 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular - Data Returned But ng-repeat Not Displaying It

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related