1

app.js

(function(){

    var myApp = angular.module('loja', []);


    myApp.controller('CarrinhoController', ['$scope','$http', function($scope, $http){
        $scope.title = 'Lista de Produtos';


        $http.get('js/produtos.json').success(function(data){

            $scope.lista = data;

        });

    }]);



})();

produtos.json

[

    {nome: 'Feijao', preco: 2.95},

    {nome: 'Arroz', preco:6.58},

    {nome:'Biscoito', preco:7.60}

];

HTML

<!DOCTYPE html>
<html ng-app="loja">
<head lang="en">
    <meta charset="UTF-8">
    <title>Teste Angular JS</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/application/carrinho.js"></script>
</head>
<body>

    <div ng-controller="CarrinhoController">
        <h1>{{title}}</h1>

        <div class="produtos" ng-repeat="produto in lista">
            <ul>
              <li><strong>{{produto.nome}}</strong> : {{produto.preco}}</li>
            </ul>
        </div>

    </div>


</body>
</html>

Não consigo pegar os dados dos produtos que fica em um arquivo JSON pelo $http.get. O erro que da no Firebug é esse:

[ngRepeat:dupes] http://errors.angularjs.org/1.2.26/ngRepeat/dupes?>p0=produto%20in%20lista&p1=string%3A%20&p2=%22%20%22 at Error (native)

2
  • Podes criar um fiddle ou plunkr com o problema? 31/10/2014 às 4:56
  • Tenta isolar essa parte do seu código em outro arquivo para testar, a principio está tudo ok! 16/11/2015 às 17:36

2 Respostas 2

1

Altere o seu HTML adicionando track by $index em seu ng-repeat

<!DOCTYPE html>
<html ng-app="loja">
<head lang="en">
    <meta charset="UTF-8">
    <title>Teste Angular JS</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/application/carrinho.js"></script>
</head>
<body>

    <div ng-controller="CarrinhoController">
        <h1>{{title}}</h1>

        <div class="produtos" ng-repeat="produto in lista track by $index">
            <ul>
              <li><strong>{{produto.nome}}</strong> : {{produto.preco}}</li>
            </ul>
        </div>

    </div>


</body>
</html>
0

Na verdade o teu problema é a sintaxe incorreta do teu JSON.

Este aqui está correto:

[
    {"nome": "Feijao", "preco": 2.95},
    {"nome": "Arroz", "preco":6.58},
    {"nome":"Biscoito", "preco":7.60}
]

Aqui tem o plunkr functionando.

1
  • Obrigado. Fiquei o dia todo ontem tentando resolver isso. 31/10/2014 às 11:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .