Retrieving and showing data from API with AngularJS $http

Question

I have this controller:

app.controller('BuscadorClientesController', function(){
    this.clientes = [
        {
            tipo: {
                nombre: "Sarasa"
            },
            nombre: "Alan",
            direccion: "Fake Address 1234",
            telefono: "12341234",
            email: "[email protected]",
            rubro: "Lorem",
            id: "1"
        }
    ]
});

In my view the "clientes" array is being printed fine but now I want to get my Clients from my database so I made this

app.service('Clientes', function ($http) {
    this.getAll = function (success, failure) {
        $http.get('/api/clientes')
            .success(success)
            .error(failure);
    }
});

app.controller('BuscadorClientesController', function($scope, Clientes){
    Clientes.getAll(function(data){
        $scope.clientes = data
        console.log($scope.clientes)
    });
});

console.log($scope.clientes) is printing the right data (an array with a lot of objects) but its not being displayed in my view:

<tr ng-repeat="cliente in buscador.clientes">
    <td><%= cliente.tipo.nombre %></td>
    <td><%= cliente.nombre %></td>
    <td><%= cliente.direccion  %></td>
    <td><%= cliente.telefono  %></td>
    <td><%= cliente.email  %></td>
    <td><%= cliente.rubro  %></td>
</tr>

What am I doing wrong?

EDIT:

I changed the controller code to this:

app.controller('BuscadorClientesController', function(Clientes){
    var that = this
    Clientes.getAll(function(data){
        that.clientes = data
        console.log($scope.clientes)
    });
});

Is it the correct way to do it or is there any better way?

dting · Accepted Answer · 2015-04-19 01:15:16Z

If you are using the controller as syntax then your edited code is correct.

controller:

app.controller('BuscadorClientesController', function(Clientes){
    var vm = this;
    Clientes.getAll(function(data){
        vm.clientes = data;
        console.log(vm.clientes);
    });
});

html:

<tr ng-repeat="cliente in buscador.clientes">
    <td><%= cliente.tipo.nombre %></td>
    <td><%= cliente.nombre %></td>
    <td><%= cliente.direccion  %></td>
    <td><%= cliente.telefono  %></td>
    <td><%= cliente.email  %></td>
    <td><%= cliente.rubro  %></td>
</tr>

If you are not, then the clientes is on your scope and should not be prefixed by buscador:

controller:

app.controller('BuscadorClientesController', function($scope, Clientes){
    Clientes.getAll(function(data){
        $scope.clientes = data
        console.log($scope.clientes)
    });
});

html:

<tr ng-repeat="cliente in clientes">
    <td><%= cliente.tipo.nombre %></td>
    <td><%= cliente.nombre %></td>
    <td><%= cliente.direccion  %></td>
    <td><%= cliente.telefono  %></td>
    <td><%= cliente.email  %></td>
    <td><%= cliente.rubro  %></td>
</tr>

user9903 · Accepted Answer · 2015-04-19 00:40:38Z

0

You're using an incorrect way to display variables. In AngularJS you have to use ngBind or expressions.

Your view should look like this:

<tr ng-repeat="cliente in buscador.clientes">
  <td ng-bind="cliente.tipo.nombre"></td>
  <td ng-bind="cliente.nombre"></td>
  <td ng-bind="cliente.direccion"></td>
  <td ng-bind="cliente.telefono"></td>
  <td ng-bind="cliente.email"></td>
  <td ng-bind="cliente.rubro"></td>
</tr>

answered Apr 19, 2015 at 0:40

user9903

4 Comments

Alan Over a year ago

I changed my code to yours but its still not working :(

user9903 Over a year ago

@AlanM try it with <td>{{ cliente.tipo.nombre}}</td> and let me know if that works and i'll update my answer

Alan Over a year ago

It wont, I have changed $interpolateProvider.startSymbol and endSymbol to "<%=", "%>" because I am using Laravel and its template engine also uses "{{" and "}}"

Alan Over a year ago

I found a solution, check it

Collectives™ on Stack Overflow

Retrieving and showing data from API with AngularJS $http

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related