Как отобразить иерархические данные из моей базы данных в ejs

Question

Я разрабатываю приложение семейного дерева с узлами js express и ejs, но я не знаю, как отобразить базу данных по порядку (от родителя)

это мой код для получения моих данных, которые я получаюиспользуя console.log (график)

я хочу отобразить вот так

[ { _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>
 <%}%>
<% })%>

iхочу отображать вот так

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

Предполагая, что у вас есть следующая схема Mongoose:

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

Вы можете автоматически заполнять дочерние элементы для каждого человека, чтобы получить вложенное дерево персон.

Добавьте это к своей 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 должен выглядеть следующим образомthis:

<!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)