Html mongodb数据以id:ObjectId的形式播放_Html_Angularjs_Node.js_Mongodb_Express

Html mongodb数据以id:ObjectId的形式播放

html angularjs node.js mongodb express

Html mongodb数据以id:ObjectId的形式播放,html,angularjs,node.js,mongodb,express,Html,Angularjs,Node.js,Mongodb,Express,我正在尝试创建一个卑鄙的Crud项目。。我正在测试以确保控制器从数据库接收到新数据。。数据是在mongodb中接收的，但在下图中以objectId显示而且添加的数据也不会显示在本地主机中。。它是这样显示的下面是server.js的代码 var express = require('express'); var app = express(); var mongojs = require('mongojs'); var db = mongojs('employeelist',['emplo

我正在尝试创建一个卑鄙的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>


员工名单
员工名单
名称
任命
薪水
行动
我通过更改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();
    });
};

我确实发送了一些数据，但它是以这种方式存储的。我只是这样做了，它存储了，但没有显示。Neil lunn，我已经添加了。请再次检查问题，找出可能的错误。。为什么我添加的数据没有displaying@neil我解决了我的问题。。。在我看来，他显然工作得很好