用于提取 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>

希望有用。