mongodb数据以id的形式播放：ObjectId答案

【问题标题】：mongodb data is playing in the form of id: ObjectIdmongodb数据以id的形式播放：ObjectId
【发布时间】：2018-02-28 01:48:55
【问题描述】：

我正在尝试创建一个 MEAN Crud 项目。我正在测试以确保控制器从数据库中接收到新数据。数据是在 mongodb 中收到的，但在下图中的 objectId 中显示

而且添加的数据也没有显示在本地主机中..它的显示是这样的

这是server.js的代码

var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('employeelist',['employeelist']);
var bodyParser = require('body-parser');//inserting data to server

app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());//inserting data to server

app.get("/employeelist", function (req,res) {
    console.log("I received a GET Request")

    db.employeelist.find(function (err, docs) {
    console.log(docs);
    res.json(docs);
    });
});

app.post('/employeelist', function (req,res) {
    console.log(req.body);
    db.employeelist.insert(req.body,function (err,doc) { // inserting data to mongodb
        res.json(doc);
    })
});

app.listen(3000);
console.log("server running on port 3000");

这是controller.js的代码

var app = angular.module('myApp', []);
app.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
    console.log("Hello World from controller");
    $http({
        method: 'GET',
        url: '/employeelist'
    }).then(function onSuccess(response) {
        console.log("data recieved");
        $scope.employeelist=response.data;
    },function onError(error) {
            console.log("Unknown error");
            $scope.employeelist=error.data;
        });

    $scope.addEmployee = function () {
        console.log($scope.employee);
    $http({
        method: 'POST',
        url: '/employeelist'
    }).then(function Success(response) {
        console.log("Employee Added");
        $scope.employeelist = response.data;
    });
};
}]);

这里是index.html的代码

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <title>Employees List</title>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
    <h1>Employees List</h1>
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Designation</th>
                    <th>Salary</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input class="form-control" ng-model="employee.name"</td>
                    <td><input class="form-control" ng-model="employee.designation"</td>
                    <td><input class="form-control" ng-model="employee.salary"</td>
                    <td><button class="btn btn-primary" ng-click="addEmployee()">Add Employee</button></button></td>
                </tr>
                <tr ng-repeat="employee in employeelist">
                    <td>{{employee.name}}</td>
                    <td>{{employee.designation}}</td>
                    <td>{{employee.salary}}</td>
                </tr>
            </tbody>
        </table>
</div>
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/
angular.min.js"></script>
<script src="../../controllers/controller.js"></script>
</body>
</html>

添加 addemployee 后，它会打印在控制台中，但不会显示在员工列表中

这是浏览器控制台图像

【问题讨论】：

我确实发送了一些数据，但它是以这种方式存储的
我只是做了它并存储但没有显示
neil lunn 我已添加请再次检查问题
那么可能是什么错误..为什么我添加的数据没有显示
@neil lunn 我解决了我的问题......我的眼睛显然运作良好

标签： html angularjs node.js mongodb express

【解决方案1】：

我通过更改 Http Post 方法和添加刷新功能解决了我的问题

这是我所做的更改

var refresh = function () {
        $http({
            method: 'GET',
            url: '/employeelist'
        }).then(function onSuccess(response) {
            console.log("data recieved");
            $scope.employeelist = response.data;
            $scope.employee = {};
        });
    };
    refresh();

    $scope.addEmployee = function () {
        console.log($scope.employee);
    $http({
        method: 'POST',
        url: '/employeelist',
        data:$scope.employee
    }).then(function (response) {
        $scope.employee = {}; //Clear input box
        console.log('POST Response: '+ response.statusText);
        refresh();
    });
};

【讨论】：