Question

我目前正在学习Electron并使用AngularJS。我在节点和表达式中使用我的REST api，我的数据库是MongoDB。

这是我的路线

router.get('/branch/:branch',function (req,res,next) {
var br = req.params.branch;
var final = [];
    db.collection('users').find({"branch": br}, function (err, docs) {
        docs.forEach(function (ele) {
            console.log(ele['fir_id']);
            final.push(ele['fir_id']);
        })
        db.punch_coll.find(function (err, docs) {
            var d = [];
            console.log(final);
            docs.forEach(function (ele) {
                console.log(ele['fir_id']);
                if(final.includes(parseInt(ele['fir_id']))) {
                    ele['date'] = ele['date'].toDateString();
                    ele['punch_in'] = ele['punch_in'].substring(0, 8);
                    ele['punch_out'] = ele['punch_out'].substring(0, 8);
                    d.push(ele);
                }
                console.log(d);
            })
            console.log(d);
            res.send(d);
        })
    });
});

punch_coll文件

{
  _id: 58e21075e0c6800ce8b08d92,
  fir_id: '4',
  date: 'Mon Apr 03 2017',
  punch_in: '14:35:57',
  punch_out: '' 
}

用户文档

{
  _id: 58e20ee0e0c6800ce8b08d82,
  name: 'A B C',
  fir_id: 1,
  branch: 'CSE',
  year: 'SE' 
}

HTML和角度控制器脚本

    <body ng-app="myApp" ng-controller="myCtrl">
    <form class="pure-form">
    <strong>Enter FIR-ID</strong> <input type="text" ng-model="fid" ng-
 change="change()" class="pure-input-rounded">
    </form>
  </br>
  <div class="pure-g">
    <div class="pure-u-8-24" style="border-style: solid;border-
   color:lightgrey;">
    <header class="w3-container w3-light-grey">
        <h2>Fir ID :- {{fid}}</h2>
        <h3>Name :- {{user[0].name}} </h3>
    </header>
  <div class="w3-container">
    <h2>Branch :- {{user[0].branch}} </h2>
    <hr>
    <h2>Academic Year :- {{user[0].year}} </h2>
  </div>
</div>
</div>
<form class="pure-form">
  <select id="state" ng-model="branch" ng-change="changeBranch()">
      <option>CSE</option>
      <option>MECH</option>
      <option>CIVIL</option>
      <option>ENTC</option>
  </select>
</form>


<!-- <h2>Fir ID :- {{fid}}</h2>
<h2>Name :- {{user[0].name}} </h2>
<h2>Branch :- {{user[0].branch}} </h2>
<h2>Academic Year :- {{user[0].year}} </h2> -->
<div style="right:0;top:0;position:absolute;font-size:20px;">
  <table class="pure-table pure-table-horizontal">
    <thead>
    <tr>
        <th>Fir ID</th>
        <th>Date</th>
        <th>Punch In</th>
        <th>Punch Out</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="x in name">
      <td>{{ x.fir_id }}</td>
      <td>{{ x.date }}</td>
      <td>{{ x.punch_in }}</td>
      <td>{{ x.punch_out }}</td>
    </tr>
  </tbody>
</table>
</div>
  </body>

  <script>
  // You can also require other files to run in this process
  var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope,$http) {
  $scope.name;
  $scope.user;
  $scope.fid;
  $scope.branch='CSE';
  $scope.change = function() {
    //get punches for specific fir_id
    $http.get('http://localhost:3000/users/'+$scope.fid)
        .then(function(response) {
            $scope.user=response.data;
        })

    //get punches for specific fir_id
    $http.get('http://localhost:3000/punch/'+$scope.fid)
        .then(function(response) {
          console.log(response.status);
            $scope.name=response.data;
        }, function errorCallback(response) {
            $scope.name=null;
        });
  };
  $scope.changeBranch = function(){
    //get record as per branch
    $http.get('http://localhost:3000/branch/'+$scope.branch)
        .then(function(response) {
          console.log(response.status);
            $scope.name=response.data;
        }, function errorCallback(response) {
            $scope.name=null;
        });
  };
});

对于大型json而言表格呈现缓慢需要1秒，这就像它的滞后一样。我是新手，所以当然我做了一件可怕的事情。我认为我使用异步函数的方式也很糟糕，但不知道是什么让它变得缓慢或等等。

Answer 1

所以，在用简单的for循环替换foreach后，它解决了问题，但我不知道具体原因是什么。有人有同样的问题吗？

电子角度，大型json慢渲染

1 个答案: