How do I create a table using Pugjs or Jade

Question

I want to render this json file into the table using Pug but it doesn't happen as I want. I want the data in two languages and app_adi but only the latest data is coming. How can I display both?

JSON file

{
   "accounts":{
         "user":{
            "_id":"5a500vlflg0aslf011ld0a25a5",
            "username":"john",
            "id":"59d25992988fsaj19fe31d7",
            "name":"Test",
            "customer":" John Carew",
         },
         "application":[
            {
               "app_id":"5af56pi314-y1i96kdnqs871nih35",
               "language":"es"
            },
            {
               "app_id":"5af56pi314-blvinpgn4c95ywyt8j",
               "language":"en"
            }
         ]
      }
   }

Code

 body
  main
    .container              
     table.table
        tr
          th username
          th customer
          th language
          th app_id
      tbody
        each users in accounts
          tr
            td #{users.user.name}
            td #{users.user.email}
            each app in application
                td #{app.language}
                td #{app.app_id}

I want to build this table:

username customer    language  app_di
john     John Carew   es        5af56pi314-y1i96kdnqs871nih35
                      en        5af56pi314-blvinpgn4c95ywyt8j

But when I run the above code I just get the last one, only language "en"?

How can I fix this?

Answer 1

Your issue has to do with where you're starting your each loop, but there are also some structural issues with your JSON.

I am assuming that you're passing the object into your route like this:

var data = { "accounts": ... }
res.render('templatename', data);

Which means that the accounts object will be at the root of your pug template when it is rendered.

When you create a loop on accounts (an object, not an array) pug will iterate over every property in that object, so your first each (each users in accounts) will give you these two values in the users variable:

1. user
2. application

I don't think that's what you want. If you converted the accounts.user segment into an array you could successfully loop through a set of users like this:

each user in accounts.users

As for the second, you will need to reference the application as follows:

each application in accounts.application

---

Alternatively, you might be passing the data into the render function like this:

var data = { "accounts": ... }
res.render('templatename', data.accounts);

If you do it this way then you will loop through the users like this:

each user in users

The application loop will be this:

each application in applications

---

Please take a quick look at the pug iteration docs for more reference.