nhat.dev
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ
No Result
View All Result
  • Đăng nhập
logo nhat.dev
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ
No Result
View All Result
nhat.dev
No Result
View All Result
Home Lập trình

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

Nhat Tran by Nhat Tran
20 Tháng Mười, 2019
Json là gì? Tìm hiểu cách parse Json Javascript
471
SHARES
1.5k
VIEWS
Chia sẻ lên FacebookChia sẻ lên Twitter

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.

Có thể bạnquan tâm

Vì sao Flutter là lựa chọn tốt nhất để làm mobile app 2021

4 xu hướng Front-end 2021

Low-code là gì? Tương lai của lập trình

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. 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. }`;

#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.

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é.

Source: vntalking
Tags: jsonparsejson
Bài viết trước

Kinh nghiệm đọc sách cho developer

Bài viết sau

Lộ trình trở thành một Front-end Developer “hiện đại”

Nhat Tran

Nhat Tran

Chia sẻ vài thứ hay ho bản thân tìm hiểu và tìm kiếm được đến mọi người

Bài viết sau
Lộ trình trở thành một Front-end Developer “hiện đại”

Lộ trình trở thành một Front-end Developer "hiện đại"

Subscribe
Notify of
guest
guest
0 Comments
Inline Feedbacks
View all comments

Recommended.

Tổng hợp các thay đổi và tính năng mới đáng chú ý trong phiên bản iOS 14 beta 8

Tổng hợp các thay đổi và tính năng mới đáng chú ý trong phiên bản iOS 14 beta 8

11 Tháng Chín, 2020
Xu hướng Facebook Marketing 2020

Xu hướng Facebook Marketing 2020

6 Tháng Mười Hai, 2019

Trending.

Hướng dẫn cài macOS trên Laptop, PC 2019

Hướng dẫn cài macOS trên Laptop, PC 2019

6 Tháng Chín, 2020
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Hướng dẫn tạo bộ cài vanilla hackintosh dễ dàng nhất

6 Tháng Ba, 2020
Cách “lách” bản quyền âm thanh và hình ảnh video Youtube 2020

Cách “lách” bản quyền âm thanh và hình ảnh video Youtube 2020

2 Tháng Mười Một, 2020
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Kích hoạt âm thanh trong hackintosh với AppleALC

30 Tháng Mười Một, 2019
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Cài đặt Clover vào ổ cứng sau khi cài macOS

30 Tháng Mười Một, 2019
nhat.dev

© 2019 nhat.dev

Chia sẻ chút kiến thức, kinh nghiệm, thủ thuật mà bản thân đã tìm hiểu và đọc được với mọi người

  • About me
  • Privacy & Policy
  • Advertise
  • Contact

Theo dõi tôi

No Result
View All Result
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ

© 2019 nhat.dev

Xin chào

Sign In with Facebook
OR

Đăng nhập bằng SSO Nhatdev

Quên mật khẩu?

Create New Account!

Fill the forms below to register

All fields are required. Đăng nhập

Lấy lại mật khẩu

Vui lòng nhập tên người dùng hoặc địa chỉ email của bạn để đặt lại mật khẩu của bạn.

Đăng nhập