Блог

Есть ли способ отобразить результаты node-pg запроса в bootstrap-modal элементе?

Ниже приведен код в моем navbar.ejs файле, содержащий modal элемент, a form для ввода, который будет использоваться для запроса, и a button , который отправит запрос и переключит modal .

 <form class="form-inline my-2 my-lg-0" action='/performquery' method='post'>
   <input class="form-control mr-sm-2" id="name" name="name" type="text" placeholder="Search Name" aria-label="Search">
   <button class="btn btn-outline-success my-2 my-sm-0" type="button" id="search" data-toggle="modal" data-target="#nameinfo">Search</button>
</form>

                            <!-- Modal -->
<div class="modal fade" id="nameinfo" tabindex="-1" role="dialog" aria-labelledby="nameinfo" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="nameinfo">Job Information</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">amp;times;</span>
            </button>
         </div>
         <div class="modal-body">
            <table class="table table-hover">
            <thead class="thead-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Number</th>
            </tr>
            </thead>
            <tbody>
            <% var x = 1 %>
            <% nameObj.forEach(function(obj) { %>
                <tr>
                <th scope="row"><%= x %></th>
                <td><%= obj.name %></td>
                <td><%= obj.number %></td>
            <% x  ;}); %>
            </tbody>
        </table>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
 

В моем index.js файле у меня есть следующий маршрут:

 const db = require('./queries')

app.post('/performquery', db.performQuery)
 

И, наконец, в своем queries.js файле я пытаюсь запросить свою базу данных и вернуть результаты, которые будут отображаться в modal элементе:

 const performQuery = (request, response) => {
    const name = request.body;
    pool.query('SELECT * FROM contacts WHERE name=$1', name, (error, results) => {
        if (error) {
            throw error
        }
        var nameObj = results.rows;
        response.render('navbar.ejs', {
            nameObj: nameObj
        });
    })
}

module.exports = {
    performQuery,
}
 

Я думаю, что эта структура будет работать, но у меня возникли проблемы с пониманием того, как получить результаты для отображения в modal элементе.