Nested loop to pull JSON database elements - node.js

Question

I am attempting to create a dynamic group within a select2 field while I pull my data from a JSON file. I'm using a nested loop to first loop through the states, then loop through the colleges in that state. The <optgroup> label should be the state and the <option> should be the college.
What you see below is my current code, representing what I've tried.
JSON file with database info:
var collegeData = [
{
'Ohio':
[
{name: 'Colllege of Wooster', value: 'cow'},
{name: 'Ohio State University', value: 'osu'}
],
'Arizona': [
{name: 'Arizona State University', value: 'asu'}
]
}
];
Select2 with ejs loops:
<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>
Controller:
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 });
});
});
});
Ideal output in 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>
The error I receive is a Cannot read 'length' of undefined, so I know there is something wrong. My thought is that it is something to do with my syntax, but if you have other thoughts I would be happy to hear.
I've also already taken a look at W3Schools JSON Arrays article, as well as a codeburst article on JSON arrays. Neither was as specific as I needed.
Thank you!

Answer 1

Try the following:
1. Execute this query in your controller to exclude _id from the result.
collection.find({}, { _id: 0 }).toArray(function(err, results){
...
2.Try the following loop in your ejs file.
<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>
Hope it works.