Question

我正在开发带有节点js express和ejs的家族树应用程序，但我不知道如何按顺序显示数据库（来自父级）

这是我获取数据的代码我使用console.log（graph）

会得到什么

我想这样显示

[ { _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: [] } ]

这是我在ejs中的代码

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

我想这样显示

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

假设您具有以下猫鼬模式：

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],
});

您可以自动为每个Person填充子代，以便获得嵌套的Persontree。

将此添加到您的PersonSchema：

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

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

您的人员数据现在看起来像这样：

{
    "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
}

现在，在您的快速路线上，您可以执行以下操作：

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

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

要递归渲染树，例如index.ejs应该看起来像这样：

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

然后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>
    <% } %>
  <% }); %>

这将产生以下输出：

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 个答案: