Angular JS和Express项目：将对象传递给ejs视图

Question

I have an Express project, in which I am reading data from a Mongo database. 我有一个Express项目，正在从Mongo数据库中读取数据。 I want to be able to see all entries in the database when browsing to http://localhost:8080/viewreplies . 浏览到http：// localhost：8080 / viewreplies时，我希望能够看到数据库中的所有条目。

This part in the "index.js" view appears to be working ok: “ index.js”视图中的这部分工作正常：

app.get('/viewreplies', function(req, res) {

  // allreplies contains the data from the MongoDB
  var allreplies = RepliesModel.find().then(function(result){
  console.log(result);
  return result;
  });
  res.render('replies', { allreplies : allreplies });
});

When I go to the localhost:port path, the console.log command prints the full object to the console, so the retrieval looks ok. 当我转到localhost：port路径时，console.log命令将完整对象打印到控制台，因此检索看起来不错。

So then I am rendering the 'replies' view, which should list all data. 因此，然后渲染“回复”视图，该视图应列出所有数据。 Here is the concerned sample from 'replies.ejs'. 这是来自“ replies.ejs”的相关示例。

<body ng-app="myApp" ng-controller="contr">
  <h1>Overview of all the results:</h1>
  <br>
  <table>
    <th>Name:</th>
    <th>Gender:</th>
    <tr ng-repeat="reply in allreplies">
      <td> {{ reply.name }}</td>
      <td> {{ reply.gender }}</td>
    </tr>
  </table>
  <script>
    var app = angular.module('myApp', []);
    app.controller('contr', function($scope) {
      $scope.allreplies = allreplies;
    });
  </script>
</body>

It seems I am not correctly passing on the object to my rendering view. 看来我没有正确将对象传递给渲染视图。 The browser console states 浏览器控制台状态

ReferenceError: allreplies is not defined ReferenceError：未定义allreplies

Could someone take a look to see what I am doing wrong here? 有人可以看看我在做什么错吗？ Many thanks! 非常感谢！

Answer 1

You need to render the view inside the callback like this. 您需要像这样在回调内部呈现视图。 Asynchronous function take the callback which is executed after async process is completed. 异步函数采用在异步过程完成后执行的回调。

app.get('/viewreplies', function(req, res) {

  // allreplies contains the data from the MongoDB
  RepliesModel.find().then(function(result){
      console.log(result);
      res.render('replies', { allreplies : results });
  });

});

Also you are using angular to process your data on server which is wrong, 另外，您正在使用angular在服务器上处理数据，这是错误的，

ng-repeat="reaply in allreplies"

You'll need to use ejs to process throught the data and generate the html. 您将需要使用ejs处理整个数据并生成html。 Then you'll send the response to client. 然后，您将响应发送给客户端。 Angular is used from the browser not from the server. Angular是通过浏览器而不是服务器使用的。

Try something like this in your ejs template, 在您的ejs模板中尝试类似的操作，

<body>
  <h1>Overview of all the results:</h1>
  <br>
  <table>
    <th>Name:</th>
    <th>Gender:</th>
    <% for(var i=0; i<allreplies.length; i++) {%>
      <tr>
        <td><%= allreplies[i].name %></td>
        <td><%= allreplies[i].gender %></td>
      </tr>
    <% } %>
  </table>

</body>

Angular JS和Express项目：将对象传递给ejs视图

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-06-03 08:49:50

Angular JS和Express项目：将对象传递给ejs视图

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-06-03 08:49:50

解决方案1
0 已采纳 2017-06-03 08:49:50