Вложенный цикл для извлечения элементов базы данных JSON - PullRequest
Новая
       10

Вложенный цикл для извлечения элементов базы данных JSON

0 голосов
/ 01 июня 2019

Я пытаюсь создать динамическую группу в поле 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'}
        ]
    }
];

Select2 с циклами ejs: 

<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 Arrays, а также со статьей с кодами о массивах JSON. Ни один из них не был настолько конкретным, насколько мне нужно.

Спасибо!

1 Ответ

1 голос
/ 01 июня 2019

Попробуйте выполнить следующее:
1. Выполните этот запрос в контроллере, чтобы исключить _id из результата. 

collection.find({}, { _id: 0 }).toArray(function(err, results){
...

2. Попробуйте следующий цикл в файле 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>

Надеюсь, это сработает.

...