Mình lấy ví dụ như : Firebase, NewYork Times … đều có API trả về là JSON .
Mặc dù JSON có nguồn gốc từ Javascript, Tuy nhiên, JSON là một định dạng tài liệu nên nó được sử dụng bởi bất kể ngôn từ lập trình mà không có số lượng giới hạn nào cả .
Bài viết này, chúng ta sẽ cùng nhau tìm hiểu các sử dụng JSON trong Javascript. Xem Javascript xử lý JSON như thế nào nhé.
Tóm Tắt
# JSON là gì ?
JSON là một định dạng dùng để san sẻ, tàng trữ tài liệu. Trong đó, JSON sử dụng cặp Key – Value để định dạng tài liệu .
Tại sao lại nói JSON là định dạng lightweight ? Bởi vì JSON có rất ít quy tắc khi định dạng tài liệu. Nếu nói đúng mực thì chỉ có 2 quy tắc :
- Ký tự {} : dùng để định dạng Object.
- Ký tự []: dùng để định dạng parse json javascript array
Tất cả chỉ có như vậy .
Bạn đã hiểu Json là gì chưa ? Dưới đây là một ví dụ về định dạng JSON .
{
"first name": "John",
"last name": "Smith",
"age": "25",
"address": {
"street address": "21 2nd Street",
"city": "New York"
},
"phone numbers": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "fax",
"number": "646 555-4567"
}
]}
Khi nào thì sử dụng JSON?
Có nhiều trường hợp sử dụng JSON lắm, trong đây là một số ít ý tưởng sáng tạo :
- Lưu trữ dữ liệu. Có nhiều ứng dụng lưu dữ liệu dưới file dạng JSON.
- Lưu cấu hình ứng dụng, thông tin xác thực .
- Trao đổi dữ liệu giữa clien – server, giữa các server với nhau.
Có một trường hợp sử dụng JSON khá phổ cập đó chính là Ajax. Kỹ thuật AJAX thường sẽ tạo request tới server và nhận tài liệu trả về dạng JSON .
Trong Parse JSON Javascript, tất cả chúng ta có gặp một khái niệm đó là Object. Thực ra những bạn đã gặp Object ở rất nhiều nơi rồi, mình cũng đã có hẳn một bài viết về Object trong Javascript. Bạn hoàn toàn có thể đọc thêm nhé .
Nhưng khái niệm Object trong JSON thì có gì khác với Object thông thường mà bạn đã biết ? Mời bạn đọc tiếp .
# Object là gì
Object trong Json được biểu lộ bằng dấu ngoặc nhọn { }. Khái niệm Object trong Json cũng khá tương đương với Object trong Javascript. Tuy nhiên, Object trong Json vẫn có những số lượng giới hạn như :
- Key: phải luôn nằm trong dấu ngoặc kép, không được phép là biến số.
- Value: Chỉ cho phép các kiểu dữ liệu cơ bản: numbers, String, Booleans, arrays, objects, null. Không cho phép function, date, undefined.
- Không cho phép dấy phẩy cuối cùng như Object trong Javascript.
Sau đây là 1 số ít ví dụ mình họa cho những trường hợp không hợp lệ :
// Key dạng biến số - không nằm trong cặp dầu ngoặc kép
const str1 = `{ text : "X", "number": 1990 }`;
// Key đặt trong cặp dấu ngoặc đơn
const str2 = `{'text': "X", "number": 1990 }`;
// Có dấu phẩy cuối cùng
const str3 = `{"text": "X", "number": 1990, }`;
// Value là undefined
const str4 = `{"text": "X", "number": undefined }`;
// Value chứa biểu thức tính toán
const str5 = `{"text": "X", "number": 1 + 1 }`;
// Value là kiểu Date
const str6 = `{"text": "X", "number": new Date() }`;
// Value là function
const str7 = `{"text": "X", "number": function () {} }`;
// Value là number nhưng tồn tại số 0 ở đầu
const str8 = `{"text": "X", "number": 01990 }`;
// Value là số thập phân nhưng sau dấu (.) không có chữ số nào
const str9 = `{"text": "X", "number": 1990. }`;
>> Đọc thêm: 7 khái niệm Javascript không thể bỏ qua
# Parse JSON Javascript như thế nào ?
Có một điểm của Javascript mà mình cực thích đó là thao tác với JSON rất sướng. Trước đây, khi mình viết ứng dụng Android, mỗi lần phải thao tác với JSON là mình lại ngại .
Lý do là mỗi khi phải parse JSON trong Android, mình cần phải định nghĩa một data Model có những thuộc tính tương đương với những key của JSON. Sau này có thư viện tương hỗ như gson thì cũng đỡ hơn xíu .
Nhưng với Javascript thì việc Parse JSON Javascript dễ như ăn cháo vậy .
Để minh họa cho quan điểm của mình, tất cả chúng ta cùng thử đi qua một ví dụ sau. Giả sử mình có một file json ( contacts.json ) như sau :
{
"name":"Timothy",
"age":35,
"address":{
"street":"1 Main St",
"city": "Montreal"
},
"interests":["cooking", "biking"]
}
Trong đó : name là một String, age là một number, còn address là một object, interests là một array. Đủ bộ những thành phần nhé .
Nói thêm một chút ít : Khi thao tác với JSON, bạn sẽ gặp 2 trường hợp : một là việc với JSON như một đối tượng người tiêu dùng hoặc là một String .
Nếu JSON là một đối tượng người tiêu dùng trong file. js hay. html, bạn hoàn toàn có thể khởi tạo biến như sau :
let contacts = {
name:"Timothy",
age:35,
address:{
street:"1 Main St",
city: "Montreal"
},
interests:["cooking", "biking"]
}
Với trường hợp này, bạn có truy vấn vào bất kể thuộc tính của JSON .
contacts.name // Timothy contacts.age // 35 contacts.address.street // 1 Main St contacts.address.city // Montreal contacts.interests[0] // cooking contacts.interests[1] // biking
Hoặc là một chuỗi ( String ) thì như sau :
let contacts = { "name":"Timothy", "age":35, "address":{ "street":"1 Main St", "city": "Montreal"}, "interests":["cooking", "biking"]}
Nếu nhìn dạng String khó nhìn quá, bạn hoàn toàn có thể sử dụng tool sau để định dạng lại cho dễ nhìn hơn : codebeautify .
Với trường hợp dạng String, cũng tương tự như ở trên, chỉ khác là bạn cần gọi thêm một hàm
parse()để chuyển string JSON thành đối tượng JSON.
let json_object = JSON.parse(contacts) json_object.name // Timothy
Looping một arrays JSON
Như ví dụ trên, tất cả chúng ta có một mảng những sở trường thích nghi ( interests ). Để sử dụng những thành phần trong mảng thì dùng một vòng loop như for ví dụ điển hình .
for (var i = 0; i < contacts.interests.length; i++) {
console.log(contacts.interests[i]);
}
------------
output:
cooking
biking
# Tạm kết
Mình hi vọng qua bài viết, bạn đã hiểu Json là gì, cách sử dụng và parse Json Javascript.
Các bạn nên nhớ là JSON được sử dụng rất nhiều, thế cho nên đừng bỏ lỡ kỹ năng và kiến thức về JSON nhé .
Phần tiếp theo trong series học Javascript cơ bản, tất cả chúng ta sẽ gặp lại nhau trong bài viết về những sai lầm đáng tiếc thông dụng khi lập trình Javascript nhé. Nhớ đón đọc những bạn nhé !
Source: https://final-blade.com
Category : Kiến thức Internet
