Оформление вывода записей из базы данных в NodeJs

Для работы с данными важно не только уметь их получать из БД, но и выводить в HTML-разметку. Как правило, это делается с помощью шаблонизатора. Для примера возьмем Handlebars.

Итак, давайте выведем записи нашей тестовой таблицы users в следующем виде:

html<p>
  <b>user1</b>
  <b>23</b>
  <b>400</b>
</p>
<p>
  <b>user2</b>
  <b>24</b>
  <b>500</b>
</p>
<p>
  <b>user3</b>
  <b>25</b>
  <b>600</b>
</p>

Для начала в файле app.js пропишем маршрут, который будет рендерить файл шаблонизатора Handlebars. В нем будет представлена информация обо всех юзерами, поэтому назовем его users.hbs. Далее в маршруте объявим переменную query, в которой будет храниться SQL запрос для вывода всех юзеров из таблицы. Затем распакуем результат запроса в две переменные: results и fields. А в файл представления users.hbs передадим переменную results:

app.jsapp.get('/', async function(req, res) {
  let query = "SELECT * FROM users";
  let [results, fields] = await connection.query(query);
  
  res.render('users', {results: results});
});

В переменной results хранится массив из объектов:

javascript[
  {id: 1, name: 'user1', age: 23, salary: 400},
  {id: 2, name: 'user2', age: 24, salary: 500},
  {id: 3, name: 'user3', age: 25, salary: 600}
]

Поскольку results является массивом, все его объекты можно вывести в представление с помощью цикла. Для этого в двойных фигурных скобках прописывается специальная команда #each. Чтобы получить значения каждого объекта, в теле цикла нужно указать соответствующие ключи:

views/users.hbs<p>
  {{#each results}}
    <br>name: <b>{{ name }}</b>
    <br>age: <b>{{ age }}</b>
    <br>salary: <b>{{ salary }}</b>
  {{/each}}
</p>

html<div>
  <h2>user1</h2>
  <p>
    23 years, <b>400$</b>
  </p>
</div>
<div>
  <h2>user2</h2>
  <p>
    24 years, <b>500$</b>
  </p>
</div>
<div>
  <h2>user3</h2>
  <p>
    25 years, <b>600$</b>
  </p>
</div>

html<table>
  <tr>
    <th>id</th>
    <th>name</th>
    <th>age</th>
    <th>salary</th>
  </tr>
  <tr>
    <td>1</td>
    <td>user1</td>
    <td>23</td>
    <td>400</td>
  </tr>
  <tr>
    <td>2</td>
    <td>user2</td>
    <td>25</td>
    <td>500</td>
  </tr>
  <tr>
    <td>3</td>
    <td>user3</td>
    <td>23</td>
    <td>500</td>
  </tr>
</table>

html<ul>
  <li>user1</li>
  <li>user2</li>
  <li>user3</li>
</ul>