JSON (1) - Làm quen với JSON

1         JSON là gì?

Xem thêm clip sau:

https://www.youtube.com/watch?v=iiADhChRriM

JSON là viết tắt của JavaScript Object Notation, dịch nôm na là "sử dụng cú pháp/ký hiệu của đối tượng trong JavaScript để biểu diễn dữ liệu" ; là một định dạng dữ liệu đơn giản, dùng để trao đổi thông tin.

Vậy một đối tượng (object) trong JavaScript có cú pháp như thế nào? Cùng làm các ví dụ sau để tìm hiểu.

Để chạy các đoạn mã JavaScript minh họa dưới đây: tạo một tập tin html (ví dụ test.html), trong tập tin html tạo cặp thẻ <script>//đặt mã JavaScript ở đây</script>, mở tập tin test.html bằng trình duyệt, mở Developer Tools của trình duyệt, chọn tab Console để xem kết quả.

1.1       Đối tượng trong JavaScript

Trong JavaScript, để định nghĩa một đối tượng, sử dụng cặp dấu ngoặc nhọn {}

Ví dụ:

var obj = {};

Khác với các ngôn ngữ lập trình thông thường phải định nghĩa lớp (class) trước, sau đó mới tạo ra đối tượng từ lớp đã định nghĩa, JavaScript cho phép tạo ra đối tượng trực tiếp. Một đối tượng thường gồm các thuộc tính (attributes, hay properties) và các phương thức (method).

Bên trong dấu ngoặc nhọn là các thuộc tính và phương thức, với cú pháp:

var obj = {

        tenThuocTinh1: GiaTri1,

        tenThuocTinh2: GiaTri2,

        tenPhuongThuc: function() {

            noi dung cua phuong thuc

        }

    };

Có thể nhận thấy, nội dung của đối tượng bao gồm các cặp name:value (hay property:value, hay key:value). Ví dụ:

var sinhVien = {

    ten: 'Tèo', // ten là name; Tèo là value

    tuoi: 20,

    diem: 8,

    chao: function() {

        console.log('Chao anh Teo!');

    }

};

console.log(sinhVien.ten); // xuất một thuộc tính của đối tượng

sinhVien.chao(); // thực thi phương thức của đối tượng

1.2       Sử dụng cú pháp của đối tượng để biểu diễn dữ liệu

Người ta dựa vào ý tưởng của một đối tượng trong JavaScript, thay đổi một chút về cú pháp để biểu diễn dữ liệu. Đó chính là kiểu dữ liệu JSON.

JSON có một số đặc điểm sau:

– Bản thân JSON luôn ở dạng văn bản (text), là chuỗi, nên hay được gọi là chuỗi JSON

– Một đối tượng dữ liệu cần biểu diễn, được đặt trong cặp dấu ngoặc nhọn {}

– Không chứa phương thức (function)

– Dữ liệu được biểu diễn bằng các cặp name:value, trong đó name là tên của dữ liệu, value là giá trị của dữ liệu

– name phải được đặt trong cặp dấu nháy kép (“”), lưu ý không được dùng cặp dấu nháy đơn (‘’)

– value có kiểu là string được đặt trong cặp dấu nháy kép (“”)

– Giữa name và value phải có dấu hai chấm (:)

– Sau mỗi cặp name:value có dấu chấm phẩy (,), trừ cặp name:value sau cùng

– Các kiểu dữ liệu JSON có thể biểu diễn (chứa), hay cụ thể hơn là giá trị của value, gồm: string, number, boolean, null, array và object

– Tập tin chứa dữ liệu JSON có phần mở rộng là .json

– Mảng được đặt trong cặp dấu ngoặc vuông []

Ví dụ, muốn biểu diễn dữ liệu là thông tin của một sinh viên dưới dạng JSON thì tạo một biến kiểu JSON (đặt tên là sinhVienJSON) như sau:

var sinhVienJSON = '{ "ten": "Tèo", "tuoi": 20, "diem": 8 }';

    console.log(sinhVienJSON);

Nếu để thông tin sinh viên trong tập tin thì sẽ có dạng như sau:

[data.json]

{ 

    "ten": "Tèo",

    "tuoi": 20,

    "diem": 8

}

Dữ liệu JSON chứa giá trị null, mảng và đối tượng:

var sinhVienJSON = '{ "ten": "Tèo", "tuoi": 20, "diem": 8, "monHoc": [ "Toan", "tiengAnh", "lapTrinh"], "totNghiep": null, "lienLac": { "email": "teo@gmail.com", "phone": "0999.987.123" } }';

    console.log(sinhVienJSON);

[data.json]

{ 

    "ten": "Tèo", 

    "tuoi": 20, 

    "diem": 8, 

    "monHoc": [ "Toan", "tiengAnh", "lapTrinh"], 

    "totNghiep": null, 

    "lienLac": 

        { 

            "email": "teo@gmail.com", 

            "phone": "0999.987.123" 

        } 

}

1.3       JSON được dùng ở đâu?

Do JSON có định dạng đơn giản, nên con người có thể dễ dàng thao tác, làm việc với nó; các loại máy tính cũng dễ dàng tạo ra và phân tích được kiểu dữ liệu này.

JSON chính là một phần trong đặc tả ngôn ngữ JavaScript, cụ thể là trong bộ tiêu chuẩn ECMA-262, phiên bản 3, năm 1999.

JSON biểu diễn dữ liệu dưới dạng dạng văn bản (text), hoàn toàn độc lập với ngôn ngữ lập trình, nghĩa là rất nhiều ngôn ngữ lập trình có thể hiểu và làm việc được với nó. Đây chính là lý do JSON được sử dụng để trao đổi thông tin giữa các hệ thống với nhau. Ví dụ trong web là trao đổi thông tin/dữ liệu giữa web client và web server.

Hầu hết các ngôn ngữ lập trình hiện nay đều hỗ trợ kiểu dữ liệu JSON.

Kiểu dữ liệu JSON hay được sử dụng trong kĩ thuật AJAX, trong các tập tin cấu hình.

Web services và web APIs thường trả về dữ liệu chia sẻ dưới dạng JSON.

MIME Media Type của JSON là application/json.

1.4       JSON trong JavaScript

Ví dụ 1: Cho thông tin của một sinh viên dạng JSON, hãy tính điểm trung bình (diemTB) của sinh viên. Nếu điểm trung bình >=5, cập nhật trường dữ liệu totNghiep thành true, ngược lại, nếu điểm trung bình < 5, cập nhật trường dữ liệu totNghiep thành false. Ghi lại cập nhật này vào dữ liệu sinhVienJSON.

var sinhVienJSON = '{ "ten": "Tèo", "tuoi": 20, "Toan": 7, "tiengAnh": 8, "lapTrinh": 9, "diemTB": null, "totNghiep": null, "lienLac": { "email": "teo@gmail.com", "phone": "0999.987.123" } }';

Trước khi tính điểm trung bình, cần chuyển dữ liệu từ kiểu JSON (sinhVienJSON) sang kiểu object (sinhVienObj), sử dụng hàm parse của JSON.

var sinhVienObj = JSON.parse(sinhVienJSON);

    var diemTrungBinh = (sinhVienObj.Toan +  sinhVienObj.tiengAnh + sinhVienObj.lapTrinh)/3;

    console.log(diemTrungBinh);

Cập nhật trường diemTB, totNghiep trong đối tượng sinhVienObj:

// cập nhật điểm trung bình và tốt nghiệp vào sinhVienObj

    sinhVienObj.diemTB = diemTrungBinh;

    if (diemTrungBinh >= 5{

        sinhVienObj.totNghiep = true;

    } else {

        sinhVienObj.totNghiep = false;

    }

    console.log(sinhVienObj);

Đổi dữ liệu từ kiểu objec sang kiểu JSON bằng hàm stringify():

// chuyển  sang dữ liệu kiểu JSON bằng hàm stringify()

    // chuyển sinhVienObj sang sinhVienJSON

    sinhVienJSON = JSON.stringify(sinhVienObj);

    console.log(sinhVienJSON);

----

Cập nhật [29/10/2020]

-----

Bài kế tiếp: JSON (2) - JSON và AJAX