显示从 Nodejs 到 EJS 的嵌套 JSON

Posted

技术标签:

【中文标题】显示从 Nodejs 到 EJS 的嵌套 JSON【英文标题】:Displaying Nested JSON from Nodejs to EJS 【发布时间】:2021-12-22 16:33:37 【问题描述】:

我打开了 1000 个浏览器标签,但我似乎无法找到预期的信息。

server.js 在服务器中,我正在运行它以从我的 neo4j 数据库中获取数据:

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

密码查询结果 应该注意的是,上面看到的密码查询返回有效的 json。这是嵌套的 json 层次结构: 家长:UofO 儿童:CampBus 孙子:SchColUnit 曾孙:部门 这是在 neo4j 浏览器上运行时返回的值:


  "_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 在我的 ios.ejs 页面上,我尝试将数据 iosUber 移植到表单中:

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

这种从服务器到客户端的渲染不起作用,因为我不明白如何访问所有级别的嵌套 JSON 对象。看来我应该在服务器端和客户端都使用更多的“点表示法”来访问 JSON 中的嵌套级别,但我似乎找不到合适的组合。


更新 这就是我合并@fabrv 建议的地方。

嵌套 ul/li 标签 最初的问题是使用表单和选择/选项标签,但我想我会尝试使用 ul/li 标签的 poc。

<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 标记结果

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

嵌套选择/选项标签 这是我想要完成的,但嵌套/dot.notation 没有按预期工作。我可以通过将级别 2 嵌套在级别 1 中来使其按预期运行,但是一旦我将级别 3 嵌套在级别 2 中,它就会分崩离析。 请注意,我没有使用***/父级的选择/选项,因为只有 1 件事(没有可供选择的多项)。

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

如果我停在这里,我会看到

Level 1
UofO

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

如果我尝试添加第 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>
<% ) %>

我变得混乱,我错过了什么?


非常感谢您的帮助,

红色

【问题讨论】:

对于给定的 JSON 输入,您希望作为输出的预期 html/结果是什么? 【参考方案1】:

如果您尝试以与检索数据相同的方式显示数据,那么您的 ejs 标记应该是嵌套的。

您的 JSON 具有这种形状:


  "has_campus": [
      "has_schoolunit": [
          "has_dept": []
        ]
    ]

所以你的ejs 应该是这样的:

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

可以看到JSON和EJS的级别是nestedness

【讨论】:

谢谢@fabrv,我有3个问题... 1)在服务器端,我无法使用console.log(iosUberArr)看到完整的json,目前它记录的所有内容都是“[ iosUber: _type: 'IOS', name: 'University of Washington', _id: [Integer], has_campbus: [Array] ]"... 2) 在 ios.ejs Level 1 1) 那里没有问题 2) 它是空白的,因为您正在尝试打印 iosUber 子元素的 name。您必须返回iosUber.name 才能获得UofO 3)您必须为每个需要迭代的“组件”创建一个。像这样的东西(这是伪代码):&lt;select&gt;for camp &lt;option&gt; &lt;/select&gt;for camp&lt;select&gt;for unit &lt;option&gt; &lt;/select&gt;for unit &lt;select&gt;for dept &lt;option&gt;&lt;/select&gt; 啊!谢谢,好的 1)我现在看到我需要进一步进入结构:console.log(iosUberArr[0].iosUber); 2)同样的问题,谢谢 3)好的,我会处理那个结构

以上是关于显示从 Nodejs 到 EJS 的嵌套 JSON的主要内容,如果未能解决你的问题,请参考以下文章

脚本不会从 nodejs 应用程序中的 ejs 文件运行

ejs 获取嵌套对象

通过 NodeJS 获取 JSON 数据时,如何通过 ExpressJS 更新我的 EJS 模板?

如何使用 Nodejs/mongodb/mongoose 在 ejs/html 中显示数据库项目?

在作为 EJS 模板传递以查看的字符串化 JSON 中转义单引号

无法读取未定义的属性“名称” - mongoose、express、nodeJS、ejs