用于提取 JSON 数据库元素的嵌套循环
Nested loop to pull JSON database elements
我试图在 select2 字段中创建动态组,同时从 JSON 文件中提取数据。我使用嵌套循环首先遍历各州,然后遍历该州的大学。 <optgroup>
标签应该是州,<option>
应该是学院。
您在下面看到的是我目前的代码,代表我已经尝试过的代码。
JSON 包含数据库信息的文件:
var collegeData = [
{
'Ohio':
[
{name: 'Colllege of Wooster', value: 'cow'},
{name: 'Ohio State University', value: 'osu'}
],
'Arizona': [
{name: 'Arizona State University', value: 'asu'}
]
}
];
使用 ejs 循环选择 2:
<select class="single-select" id="college" name="college">
<option value="default"></option>
<% for(var i = 0; i < college.length; i++) {%>
<optgroup label="<%=college[i] %>">
<% for(var j = 0; j < college[i][j].length; j++) {%>
<option value="<%=college[i][j].value %>">
<%=college[i][j].name %></option>
<%}%>
</optgroup>
<%}%>
</select>
控制器:
var mongodb = require('mongodb').MongoClient;
var url = 'mongodb://localhost:27017/collegeApp';
app.get('/', function(rep, res){
mongodb.connect(url, (error, database) => {
const db = database.db('collegesApp');
if (error) return process.exit(1);
console.log('Connection is linked');
const collection = db.collection('colleges');
collection.find({}).toArray(function(err, results){
if (err) throw err;
res.render('index', { nav, college: results });
});
});
});
HTML中的理想输出:
<select class="single-select" id="college" name="college">
<option value="default"></option>
<optgroup label="Ohio">
<option value="cow"> College of Wooster</option>
<option value="osu"> Ohio State University</option>
</optgroup>
<optgroup label="Arizona">
<option value="asu"> Arizona State University</option>
</optgroup>
</select>
我收到的错误是 Cannot read 'length' of undefined
,所以我知道有问题。我的想法是这与我的语法有关,但如果您有其他想法,我很乐意听到。
我也已经看过 W3Schools JSON 数组文章,以及关于 JSON 数组的 codeburst 文章。两者都没有我需要的那么具体。
谢谢!
尝试以下操作:
1. 在您的控制器中执行此查询以从结果中排除 _id
。
collection.find({}, { _id: 0 }).toArray(function(err, results){
...
2.Try ejs 文件中的以下循环。
<select class="single-select" id="college" name="college">
<option value="default"></option>
<% college.forEach((coll) => { %>
<% Object.entries(coll).forEach(([key, value]) => { %>
<optgroup label="<%= key %>" >
<% Object.entries(value).forEach(([cKey, cValue]) => { %>
<option value="<%= cValue.value %>"> <%= cValue.name %> </option>
<% }); %>
</optgroup>
<% }); %>
<% }); %>
</select>
希望有用。
我试图在 select2 字段中创建动态组,同时从 JSON 文件中提取数据。我使用嵌套循环首先遍历各州,然后遍历该州的大学。 <optgroup>
标签应该是州,<option>
应该是学院。
您在下面看到的是我目前的代码,代表我已经尝试过的代码。
JSON 包含数据库信息的文件:
var collegeData = [
{
'Ohio':
[
{name: 'Colllege of Wooster', value: 'cow'},
{name: 'Ohio State University', value: 'osu'}
],
'Arizona': [
{name: 'Arizona State University', value: 'asu'}
]
}
];
使用 ejs 循环选择 2:
<select class="single-select" id="college" name="college">
<option value="default"></option>
<% for(var i = 0; i < college.length; i++) {%>
<optgroup label="<%=college[i] %>">
<% for(var j = 0; j < college[i][j].length; j++) {%>
<option value="<%=college[i][j].value %>">
<%=college[i][j].name %></option>
<%}%>
</optgroup>
<%}%>
</select>
控制器:
var mongodb = require('mongodb').MongoClient;
var url = 'mongodb://localhost:27017/collegeApp';
app.get('/', function(rep, res){
mongodb.connect(url, (error, database) => {
const db = database.db('collegesApp');
if (error) return process.exit(1);
console.log('Connection is linked');
const collection = db.collection('colleges');
collection.find({}).toArray(function(err, results){
if (err) throw err;
res.render('index', { nav, college: results });
});
});
});
HTML中的理想输出:
<select class="single-select" id="college" name="college">
<option value="default"></option>
<optgroup label="Ohio">
<option value="cow"> College of Wooster</option>
<option value="osu"> Ohio State University</option>
</optgroup>
<optgroup label="Arizona">
<option value="asu"> Arizona State University</option>
</optgroup>
</select>
我收到的错误是 Cannot read 'length' of undefined
,所以我知道有问题。我的想法是这与我的语法有关,但如果您有其他想法,我很乐意听到。
我也已经看过 W3Schools JSON 数组文章,以及关于 JSON 数组的 codeburst 文章。两者都没有我需要的那么具体。
谢谢!
尝试以下操作:
1. 在您的控制器中执行此查询以从结果中排除 _id
。
collection.find({}, { _id: 0 }).toArray(function(err, results){
...
2.Try ejs 文件中的以下循环。
<select class="single-select" id="college" name="college">
<option value="default"></option>
<% college.forEach((coll) => { %>
<% Object.entries(coll).forEach(([key, value]) => { %>
<optgroup label="<%= key %>" >
<% Object.entries(value).forEach(([cKey, cValue]) => { %>
<option value="<%= cValue.value %>"> <%= cValue.name %> </option>
<% }); %>
</optgroup>
<% }); %>
<% }); %>
</select>
希望有用。