Error: [ngRepeat:dupes] Using MEAN w/ Heroku

时间:2016-02-12 19:53:08

标签: angularjs node.js express heroku mean-stack

I'm simply fetching data from a database and displaying it in an html file with ngRepeat. Connection to database is successful and I'm able to add data to it. Also everything on the client side works as I'm able to display data in the ngRepeat div with a defined array. So the problem must be somewhere in the .get() method but I can't figure out what it is. Any suggestions?

server.js

var express = require('express');
var mongojs = require('mongojs');
var MongoClient = require("mongodb").MongoClient;
var app = express();
var port = process.env.PORT || 3000;
var db = mongojs('heroku_1x6kasdf');
var plantList = db.collection("plantList");

app.use(express.static(__dirname + "/"));

MongoClient.connect(process.env.MONGOLAB_URI, function(err, db) {
    if (err) throw err;
    console.log('SUCCESS! Connected to heroku_1x6kasdf database');

    app.get("/", function(req, res) {
        plantList
            .find({})
            .toArray(function(err, docs) {
                if (err) throw err;
                res.json(docs);
            });
    });

});



app.listen(port, function() {
    console.log('SUCCESS! Connected to ' + port);
});

controller.js

var myApp= angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {

    var refresh = function() {
        $http.get("/").success(function (response) {
            $scope.plantList = response;
        });
    };

    refresh();

}]);

index.html

<html ng-app="myApp">

...

<div ng-controller="AppCtrl">
    <div ng-repeat="plant in plantList">
        <p>{{plant.name}}</p>
        <p>{{plant.variety}}</p>
        <p>{{plant.quantity}}</p>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

This error occur when an object is found twice in an array. when you don't specify "Track by" in a repeater, angular track it by the special property "$$hashKey" which usually is something like: "object:76", "object:77" etc.

You can console.log your array and then check if one of the object has the same $$hashKey

答案 1 :(得分:1)

track by the plant id. I would not recommend var React = require('react'), ReactDOM = require('react-dom'), Router = require('react-router').Router, Route = require('react-router').Route, SiteLanding = require('./components/landing/SiteLanding'), KanbanBoard = require('./components/board/KanbanBoard'), Navigation = require('./components/navigation/Navigation'), bootstrap = require('bootstrap/dist/css/bootstrap.min.css'), fontAwesome = require('font-awesome/css/font-awesome.min.css'); class App extends React.Component{ render(){ return ( <div className="landing-container"> <Navigation /> //Not displayed {this.props.children} </div> ); } } ReactDOM.render(( <Router> <Route path="/" component={SiteLanding} /> <Route path="/dashboard" component={KanbanBoard}/> </Router>), document.getElementById('root')); module.exports = App; as it tracks by position rather than item, which will cause problems down the line.

track by $index