Bạn có cần javascript cho json không?

Có nhiều cách mà JSON có thể được sử dụng trong JavaScript. Một trong những ứng dụng cơ bản nhất của nó là lưu trữ dữ liệu. Bạn cũng có thể sử dụng nó để truyền dữ liệu giữa các máy khách, giữa các máy chủ hoặc từ máy chủ đến máy khách. Các ứng dụng hữu ích khác bao gồm khả năng định cấu hình và xác minh dữ liệu cũng như tạo cấu trúc dữ liệu

Trong hướng dẫn này, chúng ta sẽ khám phá cách bạn có thể sử dụng JSON trong các chương trình JavaScript của mình. Nếu bạn đã có kinh nghiệm lập trình với JavaScript trước đó, điều này sẽ dễ dàng đối với bạn

JSON là gì?

JSON là viết tắt của Ký hiệu đối tượng JavaScript. Đây là một định dạng được thiết kế để cho phép chia sẻ các loại dữ liệu khác nhau. JSON chủ yếu sử dụng JavaScript làm ngôn ngữ lập trình chính của nó. Nó cũng hoạt động với các ngôn ngữ khác như Python, PHP, Ruby, cũng như Java. Nó rất dễ đọc, cực kỳ nhẹ và không yêu cầu nhiều định dạng. Bạn có thể làm quen với cấu trúc và cú pháp chung của định dạng bằng cách làm theo hướng dẫn của chúng tôi. Tổng quan về định dạng chia sẻ dữ liệu JSON

JSON có thể được sử dụng riêng hoặc được xác định ở định dạng tệp khác. Khi ở một mình, nó sử dụng tiện ích mở rộng .json. Khi ở định dạng khác, nó xuất hiện dưới dạng chuỗi JSON bên trong dấu ngoặc kép hoặc dưới dạng đối tượng được gán cho biến. Ví dụ: JSON cũng có thể được sử dụng ở định dạng .html. Định dạng này cho phép bạn thực hiện truyền dữ liệu giữa máy chủ và trình duyệt một cách dễ dàng

Định dạng JSON dựa trên văn bản. Dữ liệu khóa-giá trị xuất hiện trong dấu ngoặc nhọn. Đây là giao diện của một tệp  điển hình .json

1

2

3

4

5

{

   "first_name"   .   "Sammy",

   "last_name"   .   "Cá mập",

   "trực tuyến"       :   đúng

}

Nếu bạn có một đối tượng JSON trong tệp .js hoặc .html, nó sẽ xuất hiện dưới dạng một biến như thế này

1

2

3

4

5

var sammy = {

   "first_name"   .   "Sammy",

   "last_name"   .   "Cá mập",

   "trực tuyến"       :   đúng

}

Trong một số trường hợp, bạn có thể thấy tất cả chúng trong một dòng. Đây là khi JSON hiển thị dưới dạng chuỗi thay vì dưới dạng đối tượng trong tệp JavaScript

1

var sammy = '{"first_name". "Sammy", "last_name". "Cá mập", "địa điểm". "Đại dương"}';

Bạn có thể chuyển đổi các đối tượng JSON thành chuỗi. Điều này rất hữu ích khi bạn muốn thực hiện chuyển dữ liệu nhanh chóng

Đối tượng JSON so với JavaScript

Như chúng tôi đã đề cập trước đây, JSON hoạt động với bất kỳ ngôn ngữ lập trình nào. Tuy nhiên, bạn chỉ có thể làm việc với các đối tượng JavaScript bằng JavaScript. Cú pháp trong JSON và JavaScript tương tự nhau. Sự khác biệt là các đối tượng JavaScript xuất hiện trong chuỗi thay vì dấu ngoặc kép. Ngoài ra, các đối tượng JavaScript có thể sử dụng hàm làm giá trị, nghĩa là chúng ít bị giới hạn hơn

Trong ví dụ sau, chúng tôi đang hiển thị tùy chọn JavaScript của người dùng. Người dùng là Sammy Shark và họ hiện đang trực tuyến

1

2

3

4

5

6

7

8

var người dùng = {

     first_name. "Sammy",

     họ . "Cá mập",

     trực tuyến     . true,

     full_name . chức năng() {

        trả lại cái này. first_name + " " + . .last_name;

     }

};

Như bạn có thể thấy, không có dấu ngoặc kép nào xung quanh bất kỳ khóa nào như first_name, last_name, online hoặc full_name. Ngoài ra, có một giá trị chức năng được đặt ở dòng cuối cùng. Nếu bạn muốn truy cập dữ liệu ở dạng chuỗi, bạn có thể gọi user.first_name bằng cách sử dụng ký hiệu dấu chấm. Thay vào đó, nếu bạn muốn tên đầy đủ, bạn sẽ sử dụng .html0, vì đây là một chức năng

Cách truy cập dữ liệu JSON

Giống như chúng tôi đã đề cập trong phần trước, bạn có thể truy cập dữ liệu JSON trong JavaScript bằng cách sử dụng ký hiệu dấu chấm. Hãy lấy ví dụ về một đối tượng JSON có tên là .html1

1

2

3

4

5

var sammy = {

   "first_name"   .   "Sammy",

   "last_name"   .   "Cá mập",

   "trực tuyến"       :   đúng

}

Ký hiệu dấu chấm của chúng tôi để truy cập các giá trị sẽ là

1

2

3

sammy. first_name

sammy. họ

sammy. trực tuyến

biến đến trước. Sau đó, chúng tôi đặt một dấu chấm. Cuối cùng, chúng tôi đề cập đến khóa mà chúng tôi muốn truy cập

Giả sử chúng ta muốn tạo một cảnh báo bằng JavaScript hiển thị giá trị của khóa first_name. Để làm cho nó xuất hiện trong cửa sổ bật lên, chúng tôi sẽ sử dụng hàm JavaScript .html3 như thế này

1

cảnh báo(sammy. first_name);

1

2

đầu ra

Sammy

Một cách khác để truy cập dữ liệu từ JSON là sử dụng cú pháp dấu ngoặc vuông. Khóa phải được đặt trong dấu ngoặc kép trong dấu ngoặc vuông. Đây là phần tiếp theo của ví dụ trước

1

cảnh báo(sammy["online"]);

1

2

đầu ra

thật

Nếu bạn đang làm việc với các phần tử mảng lồng nhau thì sao? . Lấy ví dụ sau

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

var user_profile = {

   "tên người dùng" . "SammyShark",

   "social_media" . [

     {

       "mô tả" . "twitter",

       "liên kết" . "https. //twitter. com/digitalocean"

     },

     {

       "mô tả" . "facebook",

       "liên kết" . "https. //www. Facebook. com/DigitalOceanCloudHosting"

     },

     {

       "mô tả" . "github",

       "liên kết" . "https. //github. com/digitalocean"

     }

   ]

}

Giả sử chúng tôi muốn truy cập chuỗi .html4. Đây là cách chúng ta sẽ sử dụng ký hiệu dấu chấm để truy cập mục đó trong mảng bằng cách sử dụng số của nó

1

cảnh báo(user_profile. social_media[1]. mô tả);

1

2

đầu ra

Facebook

Hãy nhớ thêm một dấu chấm bổ sung cho mỗi phần tử lồng nhau

Các hàm được sử dụng với JSON

Tiếp theo, chúng ta sẽ xem xét một số chức năng bạn có thể sử dụng với JSON. Việc truyền và lưu trữ dữ liệu trở nên khá dễ dàng khi bạn có thể chuyển đổi JSON từ đối tượng thành chuỗi hoặc chuỗi thành đối tượng. Chúng ta sẽ khám phá cách bạn có thể xâu chuỗi và phân tích cú pháp JSON theo hai cách khác nhau

• JSON. xâu chuỗi ()

Chuỗi tốt hơn để sử dụng khi cố gắng truyền dữ liệu theo cách nhẹ. Đó là lý do tại sao nó được sử dụng để lưu trữ và truyền dữ liệu từ máy khách đến máy chủ. Xem xét ví dụ sau. Giả sử bạn đang thu thập dữ liệu cài đặt của người dùng trên một máy. Bạn cần gửi thông tin này đến máy chủ của mình. Bạn sẽ sử dụng chuỗi cho mục đích này. Sau đó, bạn có thể chuyển đổi nó trở lại bằng cách sử dụng .html5 để đọc và làm việc với nó

Chức năng chúng tôi sẽ làm nổi bật ở đây là .html6. Hàm này chuyển đổi một đối tượng JSON thành một chuỗi JSON. Trong ví dụ này, chúng ta sẽ gán đối tượng của mình cho biến .html7. Chúng tôi sẽ chuyển đổi nó bằng hàm  .html6. Để làm điều này, chúng ta sẽ truyền .html7 cho hàm rồi gán chuỗi cho biến .json0 như vậy

1

2

var obj = {"first_name" : "Sammy", "last_name" . "Cá mập", "địa điểm" . "Đại dương"}

var s = JSON. xâu chuỗi(obj)

Gọi biến .json0 sẽ cung cấp cho bạn JSON dưới dạng chuỗi

1

'{"họ". "Sammy", "last_name". "Cá mập", "địa điểm". "Đại dương"}'

• JSON. phân tích cú pháp ()

Có thể hiểu được, .html5 phục vụ chức năng ngược lại. Sau khi vận chuyển xong dữ liệu, bạn cần chuyển đổi nó trở lại đối tượng JSON để có thể làm việc với nó. Một tùy chọn là sử dụng chức năng .json3. Tuy nhiên, cách làm này không quá an toàn. Đó là lý do tại sao chúng tôi thích sử dụng hàm .html5

Xem xét ví dụ trước một lần nữa. Chúng ta sẽ truyền chuỗi .json0 vào hàm .html5. Sau đó, chúng tôi sẽ cung cấp cho nó một biến mới

1

var o = JSON. phân tích cú pháp(s)

Đối tượng mới của chúng ta bây giờ là .json7. Nó sẽ giống như .html7. Thông tin chi tiết hơn sẽ xuất hiện khi chúng tôi xem xét .html5 trong tệp HTML như thế này

1

2

3

4

5

6

7

8

9

10

11

12

13

<. LOẠI TÀI LIỆU html>

id="người dùng">< id="user">

var s = '{"first_name". "Sammy", "last_name". "Cá mập", "địa điểm". "Đại dương"}';

var obj = JSON. phân tích cú pháp(s);

tài liệu. getElementById("người dùng").innerHTML = "Tên. " + obj. first_name + " " + . .last_name + " + "Location: " + obj. vị trí;

Tại đây, bạn thực sự có thể thấy cách chúng tôi chuyển đổi chuỗi .json0 thành một đối tượng có thể truy xuất được. Do đó, .html5 là một tùy chọn an toàn để chuyển đổi chuỗi JSON thành đối tượng

Phần kết luận

Như chúng ta đã thấy trong suốt hướng dẫn này, JSON có rất nhiều triển khai trong JavaScript. Nó đặc biệt hữu ích vì nó có thể được sử dụng với hầu hết mọi ngôn ngữ lập trình, làm cho nó trở thành tùy chọn tự nhiên. Trên hết, chúng tôi mới chỉ làm trầy xước bề mặt. Còn rất nhiều điều bạn có thể làm với JSON. Nó đã được hỗ trợ trong API