วิธีดึงและแสดงข้อมูล JSON ใน HTML โดยใช้ JavaScript
ในบทความนี้ จะแสดงวิธีดึงและแสดงข้อมูลจากฐานข้อมูล PostgreSQL ที่ส่งมาเป็นรูปแบบ JSON โดยใช้ vanilla JavaScript
แล้วเราจะบรรลุเป้าหมายนี้ได้อย่างไร?
ขั้นแรก เราจะดึงข้อมูล JSON โดยใช้การดึงข้อมูล API สิ่งนี้จะส่งคืนสัญญาด้วยข้อมูล JSON ของเรา จากนั้นเราจะผนวกข้อมูลแบบไดนามิกโดยการสร้างองค์ประกอบ HTML ได้ทันที จากนั้นเราจะผนวกข้อมูล JSON ของเราเข้ากับองค์ประกอบเหล่านั้น การรับข้อมูล JSON จาก API และแสดงบนหน้าเว็บ
ข้อกำหนดเบื้องต้น
ในการปฏิบัติตามบทความนี้ ต้องปฏิบัติตามบทความ เว็บเฟรมเวิร์ค Go Fiber และ การสร้าง Go Fiber RESful API มาก่อน
ดึงข้อมูล JSON
เพื่อให้สามารถแสดงข้อมูลนี้ในไฟล์ HTML ของเรา เราต้องดึงข้อมูลด้วย JavaScript ก่อน
เราจะดึงข้อมูลโดยใช้เรียก API เราใช้ fetch API ในลักษณะต่อไปนี้:
fetch(url)
.then(function (response) {
// ข้อมูล JSON จะมาถึงที่นี่
})
.catch(function (err) {
// หากเกิดข้อผิดพลาดขึ้น ให้แสดงที่นี่
});พารามิเตอร์ url ใช้ใน ที่ fetch การทำงาน เป็นที่ที่เราได้รับข้อมูล JSON ซึ่งมักจะเป็นที่อยู่ http ในตัวอย่าง url เป็น http://localhost:8000/todos
ฟังก์ชั่น fetch จะ return promise เมื่อดึงข้อมูล JSON จากไฟล์ ดังนั้นฟังก์ชัน then จะทำงานพร้อมกับข้อมูล JSON ในการตอบกลับ หากมีสิ่งใดผิดพลาด (เช่น ไม่พบไฟล์ JSON) ฟังก์ชัน catch จะทำงาน ให้เราดูว่าสิ่งนี้จะมีลักษณะอย่างไรในตัวอย่าง:
fetch('people.json')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log(err);
});ที่นี่เรากำลังดึง people.json (http://localhost:8000/todos) ของเรา หลังจากที่ไฟล์ถูกอ่านแล้ว เราจะเรียกใช้ฟังก์ชัน then ด้วยการตอบสนองเป็นพารามิเตอร์ ในการรับข้อมูล JSON จากการตอบกลับ เราเรียกใช้ฟังก์ชัน json()
ฟังก์ชัน json() ยังส่งกลับคำสัญญาอีกด้วย นี่คือเหตุผลที่เราแค่คืนมันและโยงอีกอันแล้วทำงาน ในฟังก์ชันที่สอง เราได้รับข้อมูล JSON จริงเป็นพารามิเตอร์ ข้อมูลนี้ดูเหมือนข้อมูลในไฟล์ JSON ของเรา
ตอนนี้เราสามารถนำข้อมูลนี้ไปแสดงบนหน้า HTML ของเราได้แล้ว สังเกตว่าเรากำลังเรียกใช้ฟังก์ชันที่เรียกว่า appendData นี่คือที่ที่เราสร้างโค้ดที่จะผนวกข้อมูลเข้ากับเพจของเรา
สังเกตว่าในฟังก์ชัน catch ของเรา เราแค่เขียนข้อความแสดงข้อผิดพลาดไปที่คอนโซลภายนอก โดยปกติ คุณจะแสดงข้อความแสดงข้อผิดพลาดแก่ผู้ใช้หากมีสิ่งผิดปกติเกิดขึ้น
แสดงข้อมูล JSON
ก่อนที่เราจะแสดงข้อมูล JSON ของเราบนเว็บเพจ index.html มาดูหน้าตาของไฟล์กันก่อนว่าเป็นอย่างไร
<body>
<div id="myData"></div>
</body>
สวยเรียบง่ายใช่มั้ย? เรามี div ง่ายๆ ที่มี id myData แผนของเราคือกรอกข้อมูล JSON ภายใน div นี้แบบไดนามิก
มีหลายวิธีในการแสดงข้อมูลใน HTML ของเรา เราสามารถสร้างตารางและทำให้ดูดีมากด้วยสไตล์ที่ดี อย่างไรก็ตาม เราจะทำสิ่งนี้ด้วยวิธีที่เรียบง่าย เป้าหมายของเราคือเพียงแค่แสดง title ในไฟล์ JSON ของเรา
ขั้นตอนที่ 1 – รับองค์ประกอบ div จาก body
จำ div ที่มี myData id จาก index.html ของเราได้หรือไม่ เราต้องการดึง div นั้นโดยใช้ JavaScript เราต้องการสิ่งนี้เพราะเราจะเติม div ในไฟล์ JSON ของเรา
นี่คือวิธีที่เราจะทำ:
var mainContainer = document.getElementById("myData");เราได้รับองค์ประกอบโดยดำเนินการฟังก์ชัน getElementByID สิ่งนี้จะค้นหาองค์ประกอบที่มี id myData นี่คือ JavaScript วานิลลา และนี่คือวิธีที่เราพัฒนาส่วนหน้าในยุค “เก่า” 🙂
ขั้นตอนที่ 2 – วนซ้ำทุกวัตถุในวัตถุ JSON ของเรา
ขั้นตอนต่อไปคือการสร้างลูปอย่างง่าย จากนั้นเราสามารถรับทุกอ็อบเจ็กต์ในรายการ JSON Object ของเราและผนวกเข้ากับ div หลักของเรา
for (var i = 0; i < data.length; i++) {
// append each title to our page
}ขั้นตอนที่ 3 – ผนวกแต่ละบุคคลเข้ากับหน้า HTML ของเรา
ภายใน for-loop เราจะต่อท้ายแต่ละ title ภายใน div ของตัวเอง รหัสนี้จะถูกทำซ้ำสามครั้งสำหรับแต่ละ title
ขั้นแรก เราจะสร้างองค์ประกอบ div ใหม่:
var div = document.createElement("div");
ต่อไปเราจะเติม div นั้นด้วย Title จากไฟล์ JSON ของเรา
div.innerHTML = 'Title: ' + data[i].firstName + ' ' + data[i].lastName;
สุดท้าย เราจะผนวก div นี้ต่อท้ายคอนเทนเนอร์หลักของเรา:
mainContainer.appendChild(div);
แค่นั้นแหละ. ตอนนี้ เราได้ผนวกข้อมูล JSON เข้ากับหน้า index.html ของเราเรียบร้อยแล้ว ฟังก์ชั่น appendData เต็มรูปแบบมีลักษณะดังนี้:
function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.innerHTML = 'Title: ' + data[i].firstName + ' ' + data[i].lastName;
mainContainer.appendChild(div);
}
}เริ่มการทำงาน
เปิดโปรเจค gofiber จากบทความ เว็บเฟรมเวิร์ค Go Fiber
เปิดไฟล์ main.go แก้ไขโค้ดดังนี้ (สังเกต ค่า API_url ที่เราจะส่งไปที่ไฟล์ index.html)
package main
import (
"log"
"github.com/gofiber/fiber/v2"
"github.com/gofiber/template/html"
)
func main() {
// Initialize standard Go html template engine
engine := html.New("./views", ".html")
app := fiber.New(fiber.Config{
Views: engine,
})
app.Get("/", func(c *fiber.Ctx) error {
// Render index template
return c.Render("index", fiber.Map{
"API_url": "http://localhost:8000/todos",
})
})
log.Fatal(app.Listen(":8080"))
}
เปิดไฟล์ index.html แก้ไขโค้ดดังนี้ (สังเกตการรับค่า API_url จากไฟล์ main.go จะใช้รูปแบบ {{.API_url}} )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON - Working</title>
</head>
<body>
<div id="myData"></div>
<script>
fetch('{{.API_url}}')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log('error: ' + err);
});
function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.innerHTML = 'Title: ' + data[i].title + ' ' + data[i].completed;
mainContainer.appendChild(div);
}
}
</script>
</body>
</html>
ทดสอบการทำงาน
เปิดโปรเจค todolist จากบทความ Go Fiber RESful API และทดสอบการทำงาน (แสดงข้อมูลจากฐานข้อมูล PostgreSQL ที่ส่งมาเป็นรูปแบบ JSON) ที่ได้สร้างไว้ก่อนหน้านี้
go run main.go
แล้วจึง ทดสอบการทำงานโปรเจคที่ทำอยู่
go run main.go
ไปที่เว็บบราวเซอร์ ป้อน URL http://localhost:8080/ คุณจะเห็นข้อมูล JSON อยู่บนหน้าจอของคุณ
ทำไมต้องใช้ vanilla JavaScript
คุณอาจสงสัยว่าจุดประสงค์ของการสร้างสิ่งนี้ใน vanilla JavaScript คืออะไร เว็บแอปพลิเคชันสมัยใหม่ไม่ได้ใช้เฟรมเวิร์กและไลบรารีเช่น Angular, ReactJS หรือ VueJS ใช่ไหม
อืม ใช่ คุณอาจจะพูดถูกเกือบตลอดเวลา แต่หน้าเว็บบางหน้าก็นิ่งและมีเหตุผลน้อยมาก
หากคุณต้องการปรับแต่งส่วนเล็ก ๆ ของเว็บไซต์ การรวมไลบรารีขนาดใหญ่จะทำให้เว็บไซต์ช้าลง
นอกจากนี้ เฟรมเวิร์กและไลบรารีต่างๆ เข้ามาเรื่อยๆ JavaScript วานิลลาเก่าที่ดีอยู่ที่นี่แล้ว ดังนั้นจงใช้ทุกโอกาสเพื่อเรียนรู้มัน คุณไม่รู้ว่าเมื่อใดที่คุณอาจต้องการมัน
