Sử dụng JSON trong HTML bằng JavaScript
Javascript căn bản | by
Trong phát triển web hiện đại, việc hiển thị dữ liệu một cách linh hoạt và tương tác trực tiếp trên trình duyệt ngày càng trở nên quan trọng. Một trong những cách hiệu quả nhất để truyền và xử lý dữ liệu giữa các phần trong ứng dụng web là sử dụng JSON (JavaScript Object Notation). Với sự hỗ trợ mạnh mẽ của JavaScript, JSON không chỉ giúp lưu trữ và trao đổi thông tin giữa client và server, mà còn cho phép dễ dàng thao tác và hiển thị dữ liệu ngay trong HTML. Bài viết này sẽ hướng dẫn bạn cách sử dụng JSON trong HTML bằng JavaScript, từ việc khai báo dữ liệu đến cách hiển thị chúng lên giao diện người dùng một cách linh hoạt và trực quan.
JSON là gì?
.png)
JSON (JavaScript Object Notation) là một định dạng dữ liệu dựa trên văn bản, được sử dụng phổ biến để lưu trữ và trao đổi dữ liệu giữa máy chủ và trình duyệt, hoặc giữa các thành phần khác nhau trong ứng dụng. JSON có cú pháp đơn giản, dễ đọc và dễ hiểu đối với cả con người và máy tính.
Đặc điểm của JSON:
-
Dạng văn bản: JSON là một chuỗi văn bản thuần túy, có thể dễ dàng lưu vào tệp hoặc truyền qua mạng.
-
Cấu trúc dữ liệu rõ ràng: JSON hỗ trợ các kiểu dữ liệu cơ bản như
string,number,boolean,null,array, vàobject. -
Ngôn ngữ độc lập: Mặc dù được phát triển từ JavaScript, JSON là định dạng độc lập với ngôn ngữ và được hầu hết các ngôn ngữ lập trình hiện nay hỗ trợ.
Ưu điểm:
-
Dễ chuyển đổi với JavaScript: JSON có thể dễ dàng chuyển đổi qua lại giữa object JavaScript và chuỗi JSON bằng các hàm tích hợp như
JSON.stringify()vàJSON.parse(). -
Nhẹ và hiệu quả: JSON thường nhẹ hơn XML và dễ xử lý hơn trong môi trường web.
-
Dễ học, dễ dùng: Cú pháp gần giống với khai báo object trong JavaScript, rất quen thuộc với lập trình viên frontend.
Một ví dụ JSON đơn giản:
{
"name": "Alice",
"age": 25,
"isStudent": false
}
Ví dụ trên mô tả một đối tượng JSON có ba thuộc tính: name là chuỗi, age là số, và isStudent là giá trị boolean.
Nhúng dữ liệu JSON vào HTML trong JavaScript
Để sử dụng dữ liệu JSON trong trang HTML, có nhiều cách khác nhau để nhúng hoặc tải dữ liệu vào. Tùy vào nhu cầu cụ thể, bạn có thể chọn một trong các phương pháp dưới đây:
Viết trực tiếp trong mã JavaScript (biến cục bộ)
Bạn có thể khai báo một biến JavaScript và gán cho nó một đối tượng JSON (hoặc chính xác hơn là một object JavaScript viết theo cú pháp JSON):
<script>
const userData = {
"name": "Alice",
"age": 25,
"isStudent": true
};
console.log(userData.name); // In ra: Alice
</script>
Ưu điểm: Nhanh chóng, đơn giản, không cần thao tác ngoài.
Nhược điểm: Không tách biệt dữ liệu và logic, không phù hợp với dữ liệu lớn hoặc từ server.
Nhúng trong thẻ <script type="application/json">
Đây là cách tách dữ liệu ra khỏi logic JavaScript nhưng vẫn nằm trong cùng một tệp HTML. Dữ liệu được nhúng trong một thẻ <script> với thuộc tính type="application/json", sau đó bạn có thể đọc và xử lý trong JavaScript.
<script type="application/json" id="json-data">
{
"title": "Sách hay",
"author": "Nguyễn Văn A"
}
</script>
<script>
const jsonText = document.getElementById("json-data").textContent;
const book = JSON.parse(jsonText);
console.log(book.title); // In ra: Sách hay
</script>
Hiển thị dữ liệu JSON trong HTML bằng JavaScript
Khi bạn đã có dữ liệu JSON, bạn cần đọc, phân tích và hiển thị nó lên giao diện HTML. Dưới đây là các bước cụ thể:
Cách đọc và phân tích dữ liệu JSON (sử dụng JSON.parse())
Nếu dữ liệu JSON ở dạng chuỗi (string), bạn cần dùng JSON.parse() để chuyển thành đối tượng JavaScript:
const jsonString = '{"name": "Alice", "age": 25}';
const user = JSON.parse(jsonString);
console.log(user.name); // Alice
Lưu ý: Nếu dữ liệu đã là object (ví dụ từ biến JavaScript hoặc fetch đã parse), không cần dùng
JSON.parse().
Cách truy cập dữ liệu từ object hoặc array JSON
Đối tượng đơn (Object):
const user = {
name: "Alice",
age: 25
};
console.log(user.name); // Alice
Mảng đối tượng (Array of objects):
const users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 }
];
console.log(users[1].name); // Bob
Sử dụng DOM để gắn dữ liệu vào HTML
Bạn có thể hiển thị dữ liệu bằng cách thao tác DOM:
Sử dụng innerHTML:
<div id="output"></div>
<script>
const user = { name: "Alice", age: 25 };
document.getElementById("output").innerHTML = `Tên: ${user.name} - Tuổi: ${user.age}`;
</script>
Tạo phần tử mới (createElement, appendChild):
const users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 }
];
const container = document.getElementById("output");
users.forEach(user => {
const p = document.createElement("p");
p.textContent = `${user.name} (${user.age} tuổi)`;
container.appendChild(p);
});
Ví dụ thực tế JSON trong HTML bằng JavaScript
Ví dụ 1: Nhúng JSON trực tiếp và hiển thị lên bảng HTML
<table id="userTable" border="1">
<tr><th>Tên</th><th>Tuổi</th></tr>
</table>
<script>
const users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 }
];
const table = document.getElementById("userTable");
users.forEach(user => {
const row = document.createElement("tr");
row.innerHTML = `<td>${user.name}</td><td>${user.age}</td>`;
table.appendChild(row);
});
</script>
Ví dụ 2: Nhúng JSON trong thẻ <script type="application/json">
<script type="application/json" id="user-json">
[
{ "name": "Alice", "age": 25 },
{ "name": "Bob", "age": 30 }
]
</script>
<div id="list"></div>
<script>
const raw = document.getElementById("user-json").textContent;
const users = JSON.parse(raw);
const div = document.getElementById("list");
users.forEach(u => {
div.innerHTML += `<p>${u.name} - ${u.age} tuổi</p>`;
});
</script>
Ví dụ 3: Dùng fetch() để lấy JSON từ file/server và hiển thị
<div id="productList"></div>
<script>
fetch('products.json') // Giả sử có file products.json trên cùng thư mục
.then(res => res.json())
.then(data => {
const container = document.getElementById("productList");
data.forEach(product => {
const item = document.createElement("p");
item.textContent = `${product.name} - Giá: ${product.price}₫`;
container.appendChild(item);
});
});
</script>
Lưu ý: File products.json cần tồn tại và chứa nội dung hợp lệ như:
[
{ "name": "Sách A", "price": 120000 },
{ "name": "Sách B", "price": 90000 }
]
Xử lý sự kiện kết hợp với dữ liệu JSON trong HTML bằng JavaScript
Khi sử dụng JSON trong HTML, bạn có thể kết hợp với các sự kiện tương tác của người dùng như click, nhập liệu, chọn dropdown… để hiển thị, lọc hoặc thay đổi dữ liệu một cách linh hoạt.
Thêm sự kiện click để lọc dữ liệu JSON và hiển thị kết quả
Giả sử bạn có một danh sách sản phẩm, và bạn muốn hiển thị những sản phẩm thuộc một danh mục khi người dùng click vào nút:
<button onclick="filterCategory('sach')">Sách</button>
<button onclick="filterCategory('dochoi')">Đồ chơi</button>
<div id="result"></div>
<script>
const products = [
{ name: "Sách Toán", category: "sach" },
{ name: "Búp bê", category: "dochoi" },
{ name: "Sách Văn", category: "sach" }
];
function filterCategory(category) {
const filtered = products.filter(p => p.category === category);
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = ""; // Xóa nội dung cũ
filtered.forEach(p => {
resultDiv.innerHTML += `<p>${p.name}</p>`;
});
}
</script>
Kết hợp với form/input để tìm kiếm hoặc lọc dữ liệu
Ví dụ: Tìm người dùng theo tên từ dữ liệu JSON:
<input type="text" id="search" placeholder="Tìm tên..." />
<button onclick="searchUser()">Tìm</button>
<div id="output"></div>
<script>
const users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 22 }
];
function searchUser() {
const keyword = document.getElementById("search").value.toLowerCase();
const results = users.filter(u => u.name.toLowerCase().includes(keyword));
const out = document.getElementById("output");
out.innerHTML = results.map(u => `<p>${u.name} - ${u.age} tuổi</p>`).join('');
}
</script>
Kết hợp với dropdown để lọc dữ liệu
<select onchange="filterByAge(this.value)">
<option value="">Chọn tuổi</option>
<option value="25">25</option>
<option value="30">30</option>
</select>
<div id="list"></div>
<script>
const users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "David", age: 25 }
];
function filterByAge(age) {
const filtered = age ? users.filter(u => u.age == age) : users;
const list = document.getElementById("list");
list.innerHTML = filtered.map(u => `<p>${u.name} - ${u.age}</p>`).join('');
}
</script>
