In Express App pug div class repeat with MySQL data

Question

Now I'm developing Express-NodeJS version of my portfolio page. You can access static web page with this Link

So I put my data in MySQL Server. In the Pug template I want to repeat the div element and also inside elements too.

Can you give me some examples of the div iteration and how to put the MySQL data into pug template.

in the comment line I want to change it because I want to make it CRUD App.

extends layout

block content
  .container
  header.header
    .logo-container
      img.logo(src='images/logo.png')
    .profile-container
      h1.name Si Hyeong Lee
      h2.job Front-End Developer
  hr.first-hr
  article.article
    img.image-cover(src='images/coverimg.jpg')
  h2.work-title Featured Work
  .work-container
    hr.second-hr
    //- .work
    //-   img.image(src='/' + imageurl, alt='My Projects')
    //-   h2.project-name React Chat App
    //-   p.project-url
    //-     a(href='https://sangumee.herokuapp.com', target='_blank') https://sangumee.herokuapp.com/
    //- .work
    //-   img.image(src='/' + imageurl, alt='My Projects')
    //-   h2.project-name BlueInno2 Projects
    //-   p.project-url
    //-     a(href='https://github.com/sangumee/Blueinno2', target='_blank') https://github.com/sangumee/Blueinno2
    //- .work
    //-   img.image(src='/' + imageurl, alt='My Projects')
    //-   h2.project-name Public API Projects
    //-   p.project-url
    //-     a(href='https://github.com/sangumee/Public-Data-Project', target='_blank') https://github.com/sangumee/Public-Data-Project
  footer.footer
    p Copyright © 2018 Si Hyeong Lee, sangumee

Answer 1

In pug you can use each to iterate over an iterable.

An example from the offical pug docs

   ul
      each val in [1, 2, 3, 4, 5]
       li= val

returns something like

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Please read more about this in the official docs: https://pugjs.org/language/iteration.html