How to display hierarchical data from my database in 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)

this is my code for get my data what i get using 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

<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.

Add this to your 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:

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

And then the person.ejs looks like this:

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