如何在ejs中显示数据库中的分层数据

Question

I'm developing a family tree application with node js express and ejs but I do not know how to display the database by order (from parent) 我正在开发带有节点js express和ejs的家族树应用程序，但是我不知道如何按顺序显示数据库（来自父级）

this is my code for get my data what i get using console.log(graph) 这是我的代码，用于获取我使用console.log（graph）得到的数据

i want to display like this 我想这样显示

[ { _id: 5cacce28c5a602439a2e5988,
children: [ 5cacce32c5a602439a2e5989 ],
PersonName: 'Adam',
createdAt: 2019-04-09T16:54:00.466Z,
__v: 1,
Demo: [] },
{ _id: 5cacce32c5a602439a2e5989,
children:
 [ 5cacce39c5a602439a2e598a,
   5cacce46c5a602439a2e598b,
   5cacce4cc5a602439a2e598c ],
PersonName: 'Eva',
Parent: '5cacce28c5a602439a2e5988',
createdAt: 2019-04-09T16:54:10.745Z,
__v: 3,
Demo: [] },
{ _id: 5cacce39c5a602439a2e598a,
children: [],
PersonName: 'Jacob',
Parent: '5cacce32c5a602439a2e5989',
createdAt: 2019-04-09T16:54:17.621Z,
__v: 0,
Demo: [] },
{ _id: 5cacce46c5a602439a2e598b,
children: [ 5cacce5dc5a602439a2e598d, 5cacce67c5a602439a2e598e ],
PersonName: 'boy 1',
Parent: '5cacce32c5a602439a2e5989',
createdAt: 2019-04-09T16:54:30.700Z,
__v: 2,
Demo: [] },
{ _id: 5cacce4cc5a602439a2e598c,
children: [],
PersonName: 'boy 2',
Parent: '5cacce32c5a602439a2e5989',
createdAt: 2019-04-09T16:54:36.864Z,
__v: 0,
Demo: [] },
{ _id: 5cacce5dc5a602439a2e598d,
children: [],
PersonName: 'boy 1 2',
Parent: '5cacce46c5a602439a2e598b',
createdAt: 2019-04-09T16:54:53.881Z,
__v: 0,
Demo: [] },
{ _id: 5cacce67c5a602439a2e598e,
children: [],
PersonName: 'boy 1 3',
Parent: '5cacce46c5a602439a2e598b',
createdAt: 2019-04-09T16:55:03.027Z,
__v: 0,
Demo: [] } ]

this is my code in ejs 这是我在ejs中的代码

<ul> 
<% persons.forEach(function(person) { %>
    <% if (person.children === []) {  %>
     <ul>
    <%}%>
    <li> <%= person.PersonName %></li>
  <% if (person.children === []) {  %>
    </ul>
 <%}%>
<% })%>

i want to display like this 我想这样显示

Adam (1)
  Eva (1.2)
    Jacob (1.2.1)
    Boy1  (1.2.2)
      boy 12 (1.2.2.1)
      boy13  (1.2.2.2)
    boy2  (1.2.2)

Answer 1

Assuming you have the following Mongoose Schema: 假设您具有以下猫鼬模式：

const PersonSchema = new Schema({
  PersonName: { type: String, required: true, unique: true },
  Parent: { type: mongoose.ObjectId, ref: 'Person' },
  createdAt: { type: Date, default: Date.now },
  children: [{ type: mongoose.ObjectId, ref: 'Person' }],
  Demo: [Schema.Types.Mixed],
});

You can auto populate the children for each Person so you get a nested Persontree. 您可以自动填充每个Person的子代，以便获得嵌套的Persontree。

Add this to your PersonSchema: 将此添加到您的PersonSchema中：

const autoPopulateChildren = function(next) {
  this.populate('children');
  next();
};

PersonSchema.pre('findOne', autoPopulateChildren).pre(
  'find',
  autoPopulateChildren,
);

Your person data now looks like this: 您的人员数据现在看起来像这样：

 { "children": [ { "children": [ { "children": [], "Demo": [], "_id": "5cacee7cf64a600b75ca110c", "PersonName": "Jacob", "createdAt": "2019-04-09T19:11:56.778Z", "__v": 0, "Parent": "5cace6555590970b28c6ad86" }, { "children": [ { "children": [], "Demo": [], "_id": "5caceeb60a3bc90b8a7ff95f", "PersonName": "boy 1 2", "createdAt": "2019-04-09T19:12:54.289Z", "__v": 0, "Parent": "5cacee93d3dd470b7c9a14cc" }, { "children": [], "Demo": [], "_id": "5caceec56118710b91782387", "PersonName": "boy 1 3", "createdAt": "2019-04-09T19:13:09.886Z", "__v": 0, "Parent": "5cacee93d3dd470b7c9a14cc" } ], "Demo": [], "_id": "5cacee93d3dd470b7c9a14cc", "PersonName": "boy 1", "createdAt": "2019-04-09T19:12:19.731Z", "__v": 2, "Parent": "5cace6555590970b28c6ad86" }, { "children": [], "Demo": [], "_id": "5caceea51d771a0b8361713b", "PersonName": "boy 2", "createdAt": "2019-04-09T19:12:37.122Z", "__v": 0, "Parent": "5cace6555590970b28c6ad86" } ], "Demo": [], "_id": "5cace6555590970b28c6ad86", "PersonName": "Eva", "createdAt": "2019-04-09T18:37:09.512Z", "__v": 3, "Parent": "5cace64c0fbde60b252b5c7f" } ], "Demo": [], "_id": "5cace64c0fbde60b252b5c7f", "PersonName": "Adam", "createdAt": "2019-04-09T18:37:00.837Z", "__v": 1 }

Now on your express route you could do something like this: 现在，在您的快速路线上，您可以执行以下操作：

const person = await Person.findOne({ PersonName: 'Adam' });

res.render('index', { person });

To render the tree recursivly the index.ejs for example should look like this: 为了递归地渲染树，例如index.ejs应该看起来像这样：

<!DOCTYPE html>
<html>
  <body>
    <ul>
        <%- include('person', {person, level: 1}); %>
    </ul>
  </body>
</html>

And then the person.ejs looks like this: 然后person.ejs看起来像这样：

<li><%= person.PersonName %> (<%= level %>) </li>
<% person.children.forEach(function(child, key){ %>
    <% if (person.children.length > 0) {  %>
      <ul>
      <%- include('person', {person: child, level: level + '.' + (key + 1)}); %>
      </ul>
    <% } %>
  <% }); %>

This results in the following output: 结果为以下输出：

Adam (1)
  Eva (1.1)
    Jacob (1.1.1)
    boy 1 (1.1.2)
      boy 1 2 (1.1.2.1)
      boy 1 3 (1.1.2.2)
    boy 2 (1.1.3)

如何在ejs中显示数据库中的分层数据

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-04-09 20:16:35

如何在ejs中显示数据库中的分层数据

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-04-09 20:16:35

解决方案1
1 已采纳 2019-04-09 20:16:35