Problem loading data from a table with angularjs and api rails

0

My front-end code:

var listaDeProdutos = function(){
    $http.get("http://localhost:3000/produtos").success(function(data,status){
        $scope.listaProdutos = data;
    }).error(function(data,status){
            console.log("error");
    });
};

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Data Vencimento</th>
                <th>Descrição</th>
                <th>Tipo Produto</th>
                <th>Preço</th>
                <th>Preço Desconto</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="produtos in listaProdutos">
                <td>{{ produtos.descricao}}</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
 </div>

Now my Rails Backend:

def index
  @produtos = Produto.all
  render json: @produtos
end

JSON Result

{"produtos":[{"id":1,"descricao":"teste","tipoproduto":"Carnes","preco":12.0,"precodesconto":12.0,"datavencimento":"2015-09-17"},{"id":2,"descricao":"123","tipoproduto":"Carnes","preco":12.0,"precodesconto":12.0,"datavencimento":"2015-09-17"},{"id":3,"descricao":"teste","tipoproduto":"Carnes","preco":12.0,"precodesconto":12.0,"datavencimento":"2015-09-17"},{"id":4,"descricao":"testando salvar produto","tipoproduto":"Hortifruti","preco":20.0,"precodesconto":20.0,"datavencimento":"2015-09-18"}]}

I tested a Json manually by removing {"products": from my json returned by api and it worked, how do I solve this problem?

    
asked by anonymous 18.09.2015 / 15:09

1 answer

3

The object $scope.listaProdutos needs to direct reference to an array for ng-repeat to work.

Replacing the line

$scope.listaProdutos = data;

by

$scope.listaProdutos = data.produtos;

should resolve the issue.

    
18.09.2015 / 15:22