Until this morning, I did not know what Pug is. However, now, it's being used in a theme that I am using for work. Ran into this situation. The current pug file looks like this. is there any way to fill up this data with javascript, using some random array. For instance, suppose I have an array like this. Later,

Randomly Populate table rows in Pug files

Until this morning, I did not know what Pug is. However, now, it’s being used in a theme that I am using for work. Ran into this situation.

The current pug file looks like this.

table#datatablesSimple
    thead
        tr
            th Real Name
            th SuperHero Name
            th City
            th Age
            th Start date
            th Crime Related Expenses
    tfoot
        tr
            th Name
            th Position
            th Office
            th Age
            th Start date
            th Salary
    tbody
        tr
            td Tiger Nixon
            td System Architect
            td Edinburgh
            td 61
            td 2011/04/25
            td $320,800
        tr
            td Garrett Winters
            td Accountant
            td Tokyo
            td 63
            td 2011/07/25
            td $170,750

is there any way to fill up this data with javascript, using some random array. For instance, suppose I have an array like this. Later, I could always write some simple JavaScript code to build a collection with hundreds of names, position and so on.

But, for now, let’s take this array as example.

let someStuff = [
  {
    name : "Bruce Wayne",
    position : 'CEO',
    city : 'Gotham City',
    Age : '69',
    Date : '2008/11/13',
    Salary : '$183,000'
  },
  {
    name : "Dick Grayson",
    position : 'CFO',
    city : 'Bludhaven',
    Age : '59',
    Date : '2008/11/13',
    Salary : '$600,000'
  }
];

How could I feed this array to the pug file above?

The original pug file, and the rest of the code/theme/template I am using is available here – https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/src/pug/pages/includes/datatable.pug

I have looked at this question, How do I dynamically populate a radio button using Jade/Pug, which seems similar, but I am not able to understand how to include my array into my pug file.

I simply tried putting the object in the file, like this.

let someStuff = [
  {
    name : "Bruce Wayne",
    position : 'CEO',
    city : 'Gotham City',
    Age : '69',
    Date : '2008/11/13',
    Salary : '$183,000'
  },
  {
    name : "Dick Grayson",
    position : 'CFO',
    city : 'Bludhaven',
    Age : '59',
    Date : '2008/11/13',
    Salary : '$600,000'
  }
];

table#datatablesSimple
    thead
        tr
    //rest of the code

That gives an error.

[SB_WATCH]   var err = new Error(fullMessage);
[SB_WATCH]             ^
[SB_WATCH]
[SB_WATCH] Error: srcpugpagesincludesdatatable.pug:2:3
[SB_WATCH]     1| let someStuff = [
[SB_WATCH]   > 2|   {
[SB_WATCH] ---------^
[SB_WATCH]     3|     name : "Bruce Wayne",
[SB_WATCH]     4|     position : 'CEO',
[SB_WATCH]     5|     city : 'Gotham City',
[SB_WATCH]
[SB_WATCH] unexpected text "{

Answer

Note that the – is on a separate line. This will allow you to initialize the variable in pug.

- 
  let someStuff = [
    {
      name : "Bruce Wayne",
      position : 'CEO',
      city : 'Gotham City',
      Age : '69',
      Date : '2008/11/13',
      Salary : '$183,000'
    },
    {
      name : "Dick Grayson",
      position : 'CFO',
      city : 'Bludhaven',
      Age : '59',
      Date : '2008/11/13',
      Salary : '$600,000'
    } 
  ];

This will resolve your error.

Reference: Write pug array in multiple lines

Further, you can iterate over that array as mentioned below:

tbody
    each stuff in someStuff
      tr
        each val, key in stuff 
          td=val

Advertisement

Answer