Kịch bản thuyết trình: Slide 136

Mình tiếp tục với slide 136 về JavaScript JSON.

Ví dụ minh họa – JSON User List

Giải thích:

JSON string chứa một object với key "users", trong đó là một mảng các object con. Mỗi user có name và email.

JSON.parse() → biến chuỗi JSON thành object JS để có thể truy cập.

Ví dụ: data.users[0].name → "Alice".

Duyệt mảng users bằng forEach để tạo danh sách <li>.

Cập nhật giao diện bằng innerHTML để hiển thị kết quả.

Code minh họa:

// JSON string with array of user objects
let jsonString = `
{
    "users": [
        {"name":"Alice", "email":"alice@example.com"},
        {"name":"Bob", "email":"bob@example.com"},
        {"name":"Charlie", "email":"charlie@example.com"}
    ]
}
`;

// Convert JSON string → JavaScript object
let data = JSON.parse(jsonString);

// Build HTML List
let output = "";
data.users.forEach(user => {
    output += "<li>" + user.name + " - " + user.email + "</li>";
});

// Insert into <ul>
document.getElementById("userList").innerHTML = output;

Như vậy là mình đã trình bày xong ví dụ về cách sử dụng JSON để lưu trữ và hiển thị danh sách user.