I have a simple table that I'd like to display, but the display seems a little off. I'd like the signCount variable of each court to be under the "Sign Count" column, but for some reason it's appearing under the "Court Name" column under each court name. It seems something is messing up with the each loops... Thanks!
courts, court.users, and collections are arrays which look like this:
courts =
[ { orgName: 'Court 1',
sortNumber: 9,
level: 2,
createdAt: 2018-02-12T09:09:15.920Z,
lastModify: null,
_id: 5a8159bb65314c0407b17533,
users: [ [Object], [Object] ],
parentID: 5a74292665314c0407b0ea2b,
__v: 0 },
{ orgName: 'Court 2',
sortNumber: 1,
level: 3,
createdAt: 2018-03-06T06:02:12.820Z,
lastModify: null,
_id: 5a9e2ee42b8baf66accc7b4a,
users: [ [Object], [Object] ],
parentID: 5a8159bb65314c0407b17533,
__v: 0 },
{ orgName: 'Court 3',
sortNumber: 7,
level: 3,
createdAt: 2018-03-06T06:45:05.439Z,
lastModify: 2018-04-01T11:51:19.969Z,
_id: 5a9e38f12b8baf66accc7bd4,
users: [ [Object] ],
parentID: 5a8159bb65314c0407b17533,
__v: 0 }];;
courts.users = [{ userName: '1100zs',
displayName: 'Court 1',
phone: '',
memo: '',
mobilePhone: '',
isMaster: true }
{ userName: '1100dd',
displayName: 'Court 1.1',
phone: '',
memo: '',
mobilePhone: '',
isMaster: false }];
collections = [{courtName: '51zs', signCount: 15}, {courtName: '54zs', signCount: 7}, {courtName: '45zs', signCount: 8}];
extends layout
block content
h1 Courts
table(id="courts" align='center')
tr
th Court Name
th Level
th Display Name
th Users
th Sign Count
each court in courts
tr
td #{court.orgName}
td #{court.level}
if court.users
if court.users.length >= 1
td #{court.users[0].displayName}
td #{court.users[0].userName}
each item in collections
if court.users.length >= 1
if item.courtName == court.users[0].userName
td #{item.signCount}
else
td 0
h2 #{signCount} / #{total}
The html looks like this: (Sorry for the poor formatting. Since I wrote it in pug, I had to manually indent everything.)
<html>
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="/stylesheets/style.css">
<title>Courts by region</title>
</head>
<body>
<h1>Courts<table id="courts" align="center">
<tbody>
<tr>
<th>Court Name</th>
<th>Level</th>
<th>Display Name</th>
<th>Users</th>
<th> Sign Count </th>
</tr>
<tr>
<td>Court 1</td>
<td>2</td>
<td>Court User[0] </td>
<td>1100zs</td>
</tr>
<tr>
<th>9</th> <!-- This number should go under Sign Count... -->
</tr>
<tr>
<td>Court 2</td>
<td>3</td>
<td>Court User[0] </td>
<td>1101zs</td>
</tr>
<tr>
<th>0</th>
</tr>
<tr>
<th>0</th> <!-- This number should go under Sign Count... -->
</tr>
</tbody>
</table>
</h1>
<h2> 9 / 207</h2>
<footer>
<hr><p> © 2019 </p>
</footer>
</body>
</html>