การใช้ for each while ใน Pug JS

| PugJS | 345 | 487 วันที่แล้ว
บทความนี้มาดูวิธีการใช้ for each while ใน pug js กันครับ ซึ่งวิธีการใช้ก็ง่าย ๆ เหมือนภาษาทั่ว ๆ ไป ไปดูตัวอย่างกันเลยครับ

ul
	each val in [1, 2, 3, 4, 5]
		li= val
ผลลัพธ์ที่ได้คือ
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
จากตัวอย่างเป็นการ for each ธรรมดาทั่วไป โดยใช้ each แล้วก็ค่า value แล้วก็ In ตัวแปรหรือ array ได้ มาดูตัวอย่างต่อไปกันครับ เป็นการใช้ index ด้วย
ul
	each val, index in ['zero', 'one', 'two']
		li= index + ': ' + val
ผลลัพธ์ที่ได้คือ
<ul>
  <li>0: zero</li>
  <li>1: one</li>
  <li>2: two</li>
</ul>
จากตัวอย่างเรา for each โดยส่ง index เข้ามาด้วย ทำให้สามารถ get ได้ทั้ง value แล้วก็ index ตัวอย่างต่อไป เป็นการ each ของ object ได้ด้วย ตัวอย่างโค้ด
ul
	each val, index in {1:'one',2:'two',3:'three'}
		li= index + ': ' + val
ผลลัพธ์ที่ได้ คือ
<ul>
  <li>1: one</li>
  <li>2: two</li>
  <li>3: three</li>
</ul>
จากตัวอย่างเรา each ของ object ตัวอย่างต่อไปใน pug เราสามารถใส่ else ได้ ในกรณีที่ array หรือ object ไม่มีข้อมูลอยู่ ตัวอย่างโค้ด ตามต่อไปนี้
- var values = [];
ul
	each val in values
		li= val
	else
		li There are no values
ผลลัพธ์ที่ได้คือ
<ul>
  <li>There are no values</li>
</ul>
จากตัวอย่างโค้ดจะเห็นว่าไม่มีข้อมูลใน array ดังนั้น จะเข้ากรณี else ตัวอย่างต่อไป เราไปดูการใช้ while กันดูบ้าง ตามตัวอย่างด้านล่างเลย
- var n = 0;
ul
	while n < 4
		li= n++
เมื่อรันแล้วก็จะได้ผลลัพธ์ดังนี้
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
ดูเพิ่มเติมได้ที่ https://pugjs.org/language/iteration.html เราได้รู้การใช้ each กันแต่ละแบบแล้ว ต่อไป เรามาดูโค้ดที่นำ each ของ pug ที่ใช้ในเว็บนี้กันบ้าง
each tag in boardTags
	|  #[i(class='fa fa-tag')]  #{tag}
|  |  
i(class='fa fa-eye')  
	| #{boardView}
|  |  
i(class='fa fa-clock-o')  
	| #{boardCreate}
ตัวอย่างโค้ดข้างบนเป็น each สำหรับ แสดง tag ของบทความซึ่ง 1 บทความมีได้หลาย tag
div(class='ui fluid multiple search selection dropdown')
	input(type='hidden' name='articlecategory' value=articlecategory)
	i(class='dropdown icon')
	div(class='default text') Select Category
	div(class='menu transition hidden')
		each category in categories
			- var categoryName = category.row
			div(class='item' data-value=categoryName)=categoryName
ส่วนตัวอย่างข้างบนนี้เป็นการ each ของ category ต่าง ๆ
comments

[1]
Adobe-PDF
700 D
[1]
Android
591 D
[40]
Animal
684 D
[1]
Apache
700 D
[2]
[10]
[2]
CMS-SMF
701 D
[1]
[3]
[1]
Database
700 D
[4]
[1]
Docker
595 D
[1]
Fruit
684 D
[2]
Git
487 D
[5]
HTML
487 D
[1]
Housework
689 D
[2]
IT
681 D
[2]
Imacro
701 D
[17]
Java
484 D
[1]
Java-Web
591 D
[1]
[2]
MQL5
513 D
[3]
MakeMoney
486 D
[18]
[1]
Maven
485 D
[1]
Mobile
698 D
[1]
NodeJs
486 D
[3]
Physics
482 D
[4]
PugJS
486 D
[2]
React
496 D
[132]
Science
683 D
[1]
[2]
Spring
485 D
[7]
[2]
[1]
[4]
Ubuntu
650 D
[1]
WebLogic
682 D
[4]