Displaying Nested JSON from Nodejs to EJS

Question

I have 1000 browser tabs open and I don't seem to be able to find the expected info.

server.js
In the server, I'm running this to get the data from my neo4j database:

app.get('/ios', async (req, res) => {
  try {
const iosUberResult = await session.run(`MATCH p=(ios:IOS {name: 'UofO'})-->(ios2:CampBus)<--(ios3:SchColUnit)<--(ios4:Dept)
    With collect(p) as p2
    CALL apoc.convert.toTree(p2, true, {
        nodes: {IOS: ['name'], CampBus: ['name'], SchColUnit: ['name'], Dept: ['name']}
    }) yield value
    Return value`); 
const iosUberArr = iosUberResult.records.map(({_fields}) => {
      return {iosUber: _fields[0] };
   });
    res.render('ios', {
    iosUber:iosUberArr
   });
console.log(iosUberArr); //this does not show the entire json as hoped
  } catch(e) {
    console.log("Something went wrong", e)
  }
});

cypher query result
It should be noted that the cypher query seen above returns valid json. Here is the nested json hierarchy:
Parent:UofO
Child: CampBus
Grand Child: SchColUnit
Great Grand Child: Dept
Here is the value returned when run on neo4j browser:

{
  "_type": "IOS",
  "name": "UofO",
  "_id": 116059,
  "has_campbus": [
    {
      "date": "11/08/2021",
      "Uid": "5dad1d22-40c3-11ec-973a-0242ac130003",
      "has_schcolunit": [
        {
          "date": "11/08/2021",
          "Uid": "af76d77e-40c3-11ec-973a-0242ac130003",
          "level": 3,
          "has_dept": [
            {
              "_type": "IOS:Dept",
              "date": "11/08/2021",
              "name": "AAA Department 1",
              "Uid": "e057114c-40c3-11ec-973a-0242ac130003",
              "_id": 116068,
              "level": 4
            },
            {
              "_type": "IOS:Dept",
              "date": "11/09/2021",
              "name": "AAA Department 9",
              "Uid": "135acc0c-cb13-4bcd-8edf-1c7737123a64",
              "_id": 116099,
              "level": 4
            }
          ],
          "_type": "IOS:SchColUnit",
          "name": "AAA School College Unit  1",
          "_id": 116064
        },
        {
          "date": "11/08/2021",
          "Uid": "af76dad0-40c3-11ec-973a-0242ac130003",
          "level": 3,
          "has_dept": [
            {
              "_type": "IOS:Dept",
              "date": "11/09/2021",
              "name": "AAA Department 10",
              "Uid": "9f234e53-fe7b-4c33-b50d-a130c8867f88",
              "_id": 116100,
              "level": 4
            },
            {
              "_type": "IOS:Dept",
              "date": "11/08/2021",
              "name": "AAA Department 2",
              "Uid": "e0571354-40c3-11ec-973a-0242ac130003",
              "_id": 116069,
              "level": 4
            }
          ],
          "_type": "IOS:SchColUnit",
          "name": "AAA School College Unit  2",
          "_id": 116065
        }
      ],
      "level": 2,
      "_type": "IOS:CampBus",
      "name": "AAA Campus",
      "_id": 116060
    },
    {
      "date": "11/08/2021",
      "Uid": "5dad1fca-40c3-11ec-973a-0242ac130003",
      "has_schcolunit": [
        {
          "date": "11/08/2021",
          "Uid": "db29357c-fac4-40f4-b277-dbc100e8ee1f",
          "level": 3,
          "has_dept": [
            {
              "_type": "IOS:Dept",
              "date": "11/08/2021",
              "name": "BBB Department 5",
              "Uid": "ca1b0684-2cfe-4fb2-8274-8945116d9db5",
              "_id": 116083,
              "level": 4
            },
            {
              "_type": "IOS:Dept",
              "date": "11/09/2021",
              "name": "BBB Department 13",
              "Uid": "c2f292c7-9413-4682-80f5-c31f53f35f4b",
              "_id": 116103,
              "level": 4
            }
          ],
          "_type": "IOS:SchColUnit",
          "name": "BBB School College Unit  5",
          "_id": 116079
        },
        {
          "date": "11/08/2021",
          "Uid": "95a7f2e0-9fe8-4c75-8393-64d6e517fa73",
          "level": 3,
          "has_dept": [
            {
              "_type": "IOS:Dept",
              "date": "11/08/2021",
              "name": "BBB Department 6",
              "Uid": "362a0b56-4614-4152-b6b2-bb9e086618fa",
              "_id": 116084,
              "level": 4
            },
            {
              "_type": "IOS:Dept",
              "date": "11/09/2021",
              "name": "BBB Department 14",
              "Uid": "f27907f3-f28f-44e9-8e7a-95f4704e6143",
              "_id": 116104,
              "level": 4
            }
          ],
          "_type": "IOS:SchColUnit",
          "name": "BBB School College Unit  6",
          "_id": 116080
        }
      ],
      "level": 2,
      "_type": "IOS:CampBus",
      "name": "BBB Campus",
      "_id": 116061
    },
    {
      "date": "11/08/2021",
      "Uid": "5dad2100-40c3-11ec-973a-0242ac130003",
      "has_schcolunit": [
        {
          "date": "11/08/2021",
          "Uid": "af76dc06-40c3-11ec-973a-0242ac130003",
          "level": 3,
          "has_dept": [
            {
              "_type": "IOS:Dept",
              "date": "11/09/2021",
              "name": "CCC Department 11",
              "Uid": "f96f929d-15fc-4861-9d28-95f3c7cc604f",
              "_id": 116101,
              "level": 4
            },
            {
              "_type": "IOS:Dept",
              "date": "11/08/2021",
              "name": "CCC Department 3",
              "Uid": "e057143a-40c3-11ec-973a-0242ac130003",
              "_id": 116070,
              "level": 4
            }
          ],
          "_type": "IOS:SchColUnit",
          "name": "CCC School College Unit  3",
          "_id": 116066
        },
        {
          "date": "11/08/2021",
          "Uid": "af76dcd8-40c3-11ec-973a-0242ac130003",
          "level": 3,
          "has_dept": [
            {
              "_type": "IOS:Dept",
              "date": "11/09/2021",
              "name": "CCC Department 12",
              "Uid": "95f9b946-8cad-4471-a8a5-87809921f54e",
              "_id": 116102,
              "level": 4
            },
            {
              "_type": "IOS:Dept",
              "date": "11/08/2021",
              "name": "CCC Department 4",
              "Uid": "e05714f8-40c3-11ec-973a-0242ac130003",
              "_id": 116071,
              "level": 4
            }
          ],
          "_type": "IOS:SchColUnit",
          "name": "CCC School College Unit  4",
          "_id": 116067
        }
      ],
      "level": 2,
      "_type": "IOS:CampBus",
      "name": "CCC Campus",
      "_id": 116062
    },
    {
      "date": "11/08/2021",
      "Uid": "5dad220e-40c3-11ec-973a-0242ac130003",
      "has_schcolunit": [
        {
          "date": "11/08/2021",
          "Uid": "97068992-6457-4897-9c4c-b8397fc72fde",
          "level": 3,
          "has_dept": [
            {
              "_type": "IOS:Dept",
              "date": "11/08/2021",
              "name": "DDD Department 7",
              "Uid": "406a92e6-a8ea-43c8-9043-2ceb3d9d4428",
              "_id": 116085,
              "level": 4
            },
            {
              "_type": "IOS:Dept",
              "date": "11/09/2021",
              "name": "DDD Department 15",
              "Uid": "6570ecfc-86c1-4f60-bd43-d33036b6480f",
              "_id": 116105,
              "level": 4
            }
          ],
          "_type": "IOS:SchColUnit",
          "name": "UW Med School College Unit 7",
          "_id": 116081
        },
        {
          "date": "11/08/2021",
          "Uid": "e3bc099e-a006-4f6a-ab8a-f20e5a438ca5",
          "level": 3,
          "has_dept": [
            {
              "_type": "IOS:Dept",
              "date": "11/08/2021",
              "name": "DDD Department 8",
              "Uid": "c794b1ce-34d9-414d-9579-a01e79767392",
              "_id": 116086,
              "level": 4
            },
            {
              "_type": "IOS:Dept",
              "date": "11/09/2021",
              "name": "DDD Department 16",
              "Uid": "d6b8c84f-0bde-4fcb-ac2d-c021c395370e",
              "_id": 116106,
              "level": 4
            }
          ],
          "_type": "IOS:SchColUnit",
          "name": "DDD School College Unit 8",
          "_id": 116082
        }
      ],
      "level": 2,
      "_type": "IOS:CampBus",
      "name": "DDD Campus",
      "_id": 116063
    }
  ]
}

ios.ejs
On my ios.ejs page, I have the following where I try to port the data iosUber into a form:

                    <form id="Is-LocatedForm" method="get"  class="lb-lg form-margin ">

                        <label>Level 1</label><br>
                        <select id="" class="form-control" type="text">
                            <% iosUber.forEach(function(lev){ %>
                                <option ><%= lev.name %></option>
                            <% }) %>
                        </select>
                        <br>
                        <label>Level 2</label><br>
                        <select id="" class="form-control" type="text">
                                <% iosUber.has_campbus.forEach(function(lev){ %>
                                    <option ><%= lev.name %></option>
                                <% }) %>
                        </select>
                        <br>
                        <label>Level 3</label><br>
                        <select id="" class="form-control" type="text">
                            <% iosUber.has_schcolunit.forEach(function(lev){ %>
                                <option ><%= lev.name %></option>
                            <% }) %>
                        </select>
                        <br>
                        <label>Level 4</label><br>
                        <select id="" class="form-control" type="text">
                            <% iosUber.has_dept.forEach(function(lev){ %>
                                <option><%= lev.name %></option>
                            <% }) %>
                        </select>
                    </form>

This rendering from server to client does not work because I don't understand how to access the nested JSON object at all of its levels. It seems I should be using more 'dot notation' on both the server and client sides to access the nested level in the JSON, but I can't seem to find a wining combination.

UPDATE Here's where I'm at with incorporating @fabrv suggestions.

Nesting ul/li Tags The original ask is using a form and select/option tags, but I thought I'd try a poc with ul/li tags.

<ul style="list-style-type: none;">
    <% iosUberList.forEach(function(parent){ %>
      <li>
        <span>Level 1: <%- parent.iosUber.name %></span><br><br>

        <% parent.iosUber.has_campbus.forEach(function(campbus){ %>
          <span>Level 2: <%- campbus.name %></span><br><br>

          <% campbus.has_schcolunit.forEach(function(unit){ %>
            <span>Level 3: <%- unit.name %></span><br><br>

            <% unit.has_dept.forEach(function(dept){ %>
              <span>Level 4: <%- dept.name %></span><br><br>
              <% }) %>
          <% }) %>
        <% }) %>
      </li>
    <% }) %>
</ul>

ul Tag Result

Level 1: UofO

Level 2: AAA Campus

Level 3: AAA School College Unit 1

Level 4: AAA Department 1

Level 4: AAA Department 9

Level 3: AAA School College Unit 2

Level 4: AAA Department 10

Level 4: AAA Department 2

Level 2: BBB Campus

Level 3: BBB School College Unit 3

Level 4: BBB Department 11

Level 4: BBB Department 3

Level 3: BBB School College Unit 4

Level 4: BBB Department 12

Level 4: BBB Department 4

Level 2: CCC Campus

Level 3: CCC School College Unit 7

Level 4: CCC Department 7

Level 4: CCC Department 15

Level 3: CCC School College Unit 8

Level 4: CCC Department 8

Level 4: CCC Department 16

Level 2: DDD Campus

Level 3: DDD School College Unit 5

Level 4: DDD Department 5

Level 4: DDD Department 13

Level 3: DDD School College Unit 6

Level 4: DDD Department 6

Level 4: DDD Department 14

Nesting select/option Tags This is what I'm trying to accomplish but the nesting/dot.notation is not working as expected. I can get it to function as expected by nesting level 2 inside level 1, but as soon as I nest level 3 inside level 2 it falls apart. Note that I'm not using a select/option for the top/parent level since there's only 1 thing (no multi to choose from).

<span>Level 1</span><br>
<% iosUberList.forEach(function(parent){ %>
    <span><%= parent.iosUber.name %></span><br><br>

    <form>
         <label>Level 2</label><br>
         <select>
         <% parent.iosUber.has_campbus.forEach(function(campbus){ %>
            <option><%= campbus.name %></option>
         <% }) %>
         </select>
    </form>
<% }) %>

If I stop here, I see

Level 1
UofO

Level 2
Dropdown containing |AAA Campus BBB Campus CCC Campus DDD Campus|

If I try to add Level 3,

<span>Level 1</span><br>
<% iosUberList.forEach(function(parent){ %>
  <span><%= parent.iosUber.name %></span><br><br>

    <form>
      <label>Level 2</label><br>
        <select>
          <% parent.iosUber.has_campbus.forEach(function(campbus){ %>
            <option><%= campbus.name %></option>

          <label>Level 3</label><br>
          <select>
          <% campbus.has_schcolunit.forEach(function(unit){ %>
            <option><%= unit.name %></option>
          <% }) %>
          </select>
          <% }) %>
        </select>
    </form>
<% }) %>

I get chaos, what am I missing?

Many thanks for any help,

red

What is the expected HTML/result you would like as output for a given JSON input? — Ionică Bizău
– Ionică Bizău, Commented Nov 23, 2021 at 20:05

Dharman · Accepted Answer · 2021-11-10 03:42:55Z

2

+50

If you are trying to display your data the same way it has been retrieved then your ejs tags should be nested.

Your JSON has this shape:

{
  "has_campus": [{
      "has_schoolunit": [{
          "has_dept": []
        }]
    }]
}

So your ejs should look something like this:

<% iosUber.has_campus.forEach(function(campus) { %>
// Campus HTML
  <% campus.has_schoolunit.forEach(function(unit) { %>
    // Unit HTML
    <% unit.has_dept.forEacth(function(dept) { %>
      // Department HTML
    <% }) %>
  <% }) %>
<% }) %>

You can see that the JSON and EJS have the same level of nestedness.

edited Nov 10, 2021 at 3:42

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Nov 10, 2021 at 3:37

fabrv

3921 gold badge5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Redink Over a year ago

Thanks @fabrv, I have 3 questions... 1) On server side, I can't see the full json using console.log(iosUberArr), at present all it logs is "[ { iosUber: { _type: 'IOS', name: 'University of Washington', _id: [Integer], has_campbus: [Array] } } ]"... 2) In the ios.ejs Level 1 <select> <option>, shouldn't I see 'UofO' based on what I currently have there? Instead this shows as blank, so there's still something amiss with rendering iosUber... 3) For the ejs nested structure you suggest, would all of that go inside one <select> <option> tag, or am I still using multiple as seen in my example?

fabrv Over a year ago

1) There is no question there 2) It is blank because you are trying to print iosUber child element's name. You have to return iosUber.name to get UofO 3) You will have to make a for each for every "component" you need iteration. something like this (this is pseudocode):

<select>for camp { <option> }</select>for camp{<select>for unit { <option> }</select>for unit {<select>for dept { <option>}</select>}}

Redink Over a year ago

Gah! thank you, ok for 1) I see now I needed to console.log further into the structure: console.log(iosUberArr[0].iosUber); 2) same issue, thank you 3) ok I'll work on that structure

Collectives™ on Stack Overflow

Displaying Nested JSON from Nodejs to EJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related