Json là gì? Tìm hiểu cách parse Json Javascript

JSON là gì? JSON (JavaScript Object Notation) là một định dạng lightweight, được dùng cho mục đích chia sẻ dữ liệu. Các bạn sẽ dễ dàng thấy các dịch vụ cung cấp Rest API, thường hay trả về dữ liệu về cho client dưới dạng JSON. Khái niệm Parse JSON Javascript hẳn quen thuộc với các bạn!

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 dữ liệu nên nó được sử dụng bởi bất kỳ ngôn ngữ lập trình mà không có 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é.

#JSON là gì?

JSON là một định dạng dùng để chia sẻ, lưu trữ dữ liệu. Trong đó, JSON sử dụng cặp Key – Value để định dạng dữ 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 dữ liệu. Nếu nói chính xá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 tình huống sử dụng JSON lắm, trong đây là một số ý tưởng:

• 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ổ biến đó chính là Ajax. Kỹ thuật AJAX thường sẽ tạo request tới server và nhận dữ liệu trả về dạng JSON.

Trong Parse JSON Javascript, chúng ta có gặp một khái niệm đó là Object. Thực ra các 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 có thể đọc thêm nhé.

Nhưng khái niệm Object trong JSON thì có gì khác với Object bình thường mà bạn đã biết? Mời bạn đọc tiếp.

#Object là gì

Object trong Json được thể hiện 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 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à một số ví dụ mình họa cho các 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à làm việ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 làm việ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ó các thuộc tính tương đồng với các key của JSON. Sau này có thư viện hỗ trợ 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, 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ộ các thành phần nhé.

Nói thêm một chút: Khi làm việ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 hoặc là một String.

Nếu JSON là một đối tượng trong file .js hay .html, bạ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 cập 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 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, chúng ta có một mảng các sở thích (interests). Để sử dụng các phần tử trong mảng thì dùng một vòng loop như for chẳng hạn.

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, vì vậy đừng bỏ qua kiến thức về JSON nhé.

Phần tiếp theo trong series học Javascript cơ bản, chúng ta sẽ gặp lại nhau trong bài viết về những sai lầm phổ biến khi lập trình Javascript nhé. Nhớ đón đọc các bạn nhé!