【发布时间】：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/结果是什么？
标签： node.js json express neo4j ejs