Hướng dẫn này giới thiệu cách làm việc với JSON trong JavaScript. Một số trường hợp sử dụng chung của JSON bao gồm: lưu trữ dữ liệu, tạo dữ liệu từ người dùng trong…

Bạn đang xem: phân tích cú pháp json bằng javascript

Giới thiệu < / h3>

JSON có nguồn gốc từ ngôn ngữ lập trình JavaScript nên việc sử dụng làm định dạng dữ liệu trong JavaScript là một lựa chọn tự nhiên. JSON, viết tắt của JavaScript Object Notation , thường được phát âm giống như tên “Jason”.

Để tìm hiểu thêm về JSON nói chung, hãy đọc hướng dẫn “ Giới thiệu về JSON ”.

Để bắt đầu suy nghĩ về nơi bạn có thể sử dụng JSON trong các chương trình JavaScript của mình, một số trường hợp sử dụng chung của JSON bao gồm:

  • Lưu trữ dữ liệu
  • Tạo cấu trúc dữ liệu từ đầu vào của người dùng
  • Truyền dữ liệu từ máy chủ sang máy khách, máy khách sang máy chủ và máy chủ sang máy chủ
  • Định cấu hình và xác minh dữ liệu

Hướng dẫn này sẽ cung cấp cho bạn phần giới thiệu về cách làm việc với JSON trong JavaScript. Để tận dụng tối đa phần giới thiệu này, bạn nên làm quen với ngôn ngữ lập trình JavaScript.

Định dạng JSON

Định dạng của JSON bắt nguồn từ cú pháp đối tượng JavaScript, nhưng nó hoàn toàn dựa trên văn bản. Đây là định dạng dữ liệu khóa-giá trị thường được hiển thị trong dấu ngoặc nhọn.

Khi làm việc với JSON, bạn có thể sẽ thấy các đối tượng JSON trong tệp .json , nhưng chúng cũng có thể tồn tại dưới dạng đối tượng hoặc chuỗi JSON trong ngữ cảnh của chương trình. Đọc thêm về cú pháp và cấu trúc tại đây .

Khi bạn đang làm việc với tệp .json , nó sẽ giống như sau:

sammy.json

  

{

"first_name"

:

"Sammy"

< p class = "dấu chấm câu">,

"last_name"

:

"Shark"

< p class = "dấu chấm câu">,

"trực tuyến"

:

true

}

Thay vào đó, nếu bạn có một đối tượng JSON trong tệp .js hoặc .html , bạn có thể sẽ thấy nó được đặt thành một biến:

  

var

sammy

=

{

"first_name"

:

"Sammy"

< p class = "dấu chấm câu">,

"last_name"

:

"Shark"

< p class = "dấu chấm câu">,

"trực tuyến"

:

true

}

Ngoài ra, bạn có thể thấy JSON là một chuỗi thay vì một đối tượng trong ngữ cảnh của tệp chương trình JavaScript hoặc tập lệnh. Trong trường hợp này, bạn cũng có thể thấy tất cả trên một dòng:

  

var

sammy

=

'{"first_name": "Sammy", "last_name": "Shark", "location": "Ocean"}'

;

Việc chuyển đổi các đối tượng JSON thành chuỗi có thể đặc biệt hữu ích để vận chuyển dữ liệu một cách nhanh chóng.

Chúng tôi đã xem xét định dạng chung của JSON và cách bạn có thể thấy nó dưới dạng tệp .json hoặc trong JavaScript dưới dạng một đối tượng hoặc một chuỗi.

So sánh với Đối tượng JavaScript

Cần lưu ý rằng JSON được phát triển để sử dụng bởi bất kỳ ngôn ngữ lập trình nào, trong khi các đối tượng JavaScript chỉ có thể được làm việc trực tiếp thông qua ngôn ngữ lập trình JavaScript.

Về mặt cú pháp, các đối tượng JavaScript tương tự như JSON, nhưng các khóa trong các đối tượng JavaScript không phải là chuỗi trong dấu ngoặc kép. Ngoài ra, các đối tượng JavaScript ít bị giới hạn hơn về loại được truyền cho giá trị, vì vậy chúng có thể sử dụng các hàm làm giá trị.

Hãy xem ví dụ về đối tượng JavaScript của người dùng trang web Sammy Shark hiện đang trực tuyến.

  

var

người dùng

=

{

first_name

:

"Sammy"

,

last_name

:

"Shark"

,

trực tuyến

:

true

,

full_name

:

function

(

)

{

return

this

.

first_name

+

" "

+

cái này

.

last_name

;

}

}

;

Đối tượng JSON này trông sẽ rất quen thuộc với bạn, nhưng không có dấu ngoặc kép nào xung quanh bất kỳ khóa nào ( first_name , last_name , online , hoặc full_name ), có một giá trị hàm ở dòng cuối cùng.

Nếu chúng tôi muốn truy cập dữ liệu trong đối tượng JavaScript ở trên, chúng tôi có thể sử dụng ký hiệu dấu chấm để gọi user.first_name; và nhận một chuỗi, nhưng nếu chúng tôi muốn để truy cập vào tên đầy đủ, chúng tôi cần thực hiện việc này bằng cách gọi user.full_name (); vì nó là một hàm.

Các đối tượng JavaScript chỉ có thể tồn tại trong ngôn ngữ JavaScript, vì vậy khi bạn đang làm việc với dữ liệu cần được truy cập bằng nhiều ngôn ngữ khác nhau, tốt nhất nên chọn JSON.

Truy cập dữ liệu JSON

Dữ liệu JSON thường được truy cập trong Javascript thông qua ký hiệu dấu chấm. Để hiểu cách hoạt động của điều này, hãy xem xét đối tượng JSON sammy :

  

var

sammy

=

{

"first_name"

:

"Sammy"

< p class = "dấu chấm câu">,

"last_name"

:

"Shark"

< p class = "dấu chấm câu">,

"trực tuyến"

:

true

}

Để truy cập bất kỳ giá trị nào, chúng tôi sẽ sử dụng ký hiệu dấu chấm trông giống như sau:

  sammy 

.

first_name sammy

.

last_name sammy

.

trực tuyến

Đầu tiên, biến sammy , theo sau là dấu chấm, sau đó là khóa được truy cập.

Để tạo một cảnh báo JavaScript hiển thị cho chúng ta giá trị được liên kết với khóa first_name trong cửa sổ bật lên, chúng ta có thể làm như vậy bằng cách gọi hàm JavaScript alert () :

  

alert

(

sammy

.

first_name

)

;

  

Đầu ra

Sammy

Tại đây, chúng tôi đã gọi thành công giá trị được liên kết với khóa first_name từ đối tượng sammy JSON.

Chúng tôi cũng có thể sử dụng cú pháp dấu ngoặc vuông để truy cập dữ liệu từ JSON. Để làm điều đó, chúng tôi sẽ giữ khóa trong dấu ngoặc kép trong dấu ngoặc vuông. Đối với biến sammy của chúng tôi ở trên, việc sử dụng cú pháp dấu ngoặc vuông trong hàm alert () trông giống như sau:

  

alert

(

sammy

[

"trực tuyến"

]

)

;

  

Đầu ra

true

Khi bạn đang làm việc với các phần tử mảng lồng nhau , bạn nên gọi số của mục trong mảng của mình. Hãy xem xét JSON bên dưới:

  

var

user_profile

=

{

"tên người dùng"

:

"SammyShark"

< p class = "dấu chấm câu">,

"social_media"

:

[

{

"description"

:

"twitter"

< p class = "dấu chấm câu">,

"liên kết"

:

"https://twitter.com / digitalocean "

}

,

{

"description"

:

"facebook"

< p class = "dấu chấm câu">,

"link"

:

"https://www.facebook .com / DigitalOceanCloudHosting "

}

,

{

"description"

:

"github"

< p class = "dấu chấm câu">,

"liên kết"

:

"https://github.com / digitalocean "

}

]

}

Để truy cập chuỗi facebook , chúng ta có thể gọi mục đó trong mảng trong ngữ cảnh của ký hiệu dấu chấm:

  

alert

(

user_profile

.

social_media

[

1

]

< p class = "dấu chấm câu">.

mô tả

)

;

  

Đầu ra

facebook

Lưu ý rằng đối với mỗi phần tử lồng nhau, chúng tôi sẽ sử dụng thêm một dấu chấm.

Sử dụng ký hiệu dấu chấm hoặc cú pháp dấu ngoặc vuông cho phép chúng tôi truy cập dữ liệu có ở định dạng JSON.

Các hàm để làm việc với JSON

Phần này sẽ xem xét hai phương pháp để xâu chuỗi và phân tích cú pháp JSON. Có thể chuyển đổi JSON từ đối tượng thành chuỗi và ngược lại rất hữu ích cho việc chuyển và lưu trữ dữ liệu.

JSON.stringify ()

Hàm JSON.stringify () chuyển đổi một đối tượng thành một chuỗi JSON.

Các chuỗi rất hữu ích để vận chuyển dữ liệu từ máy khách đến máy chủ thông qua việc lưu trữ hoặc chuyển thông tin một cách nhẹ nhàng. Ví dụ: bạn có thể thu thập cài đặt của người dùng ở phía máy khách và sau đó gửi chúng đến máy chủ. Sau đó, bạn có thể đọc thông tin bằng phương thức JSON.parse () và làm việc với dữ liệu nếu cần.

Chúng tôi sẽ xem xét một đối tượng JSON mà chúng tôi gán cho biến obj và sau đó chúng tôi sẽ chuyển đổi nó bằng cách sử dụng JSON.stringify () bằng cách chuyển obj vào hàm. Chúng ta có thể gán chuỗi này cho biến s :

  

var

obj

=

{

"first_name"

:

"Sammy "

,

" last_name "

:

"Shark"

,

"vị trí"

:

"Đại dương"

}

var

s

=

JSON

.

stringify

(

obj

)

Bây giờ, nếu chúng tôi làm việc với s , chúng tôi sẽ cung cấp JSON cho chúng tôi dưới dạng một chuỗi thay vì một đối tượng.

  

'{"first_name": "Sammy", "last_name": "Shark", "location": "Ocean"}' < / p>

Hàm JSON.stringify () cho phép chúng tôi chuyển đổi các đối tượng thành chuỗi. Để làm ngược lại, chúng ta sẽ xem xét hàm JSON.parse () .

JSON.parse ()

Các chuỗi hữu ích cho việc vận chuyển nhưng bạn sẽ muốn có thể chuyển đổi chúng trở lại đối tượng JSON trên máy khách và / hoặc phía máy chủ. Chúng ta có thể thực hiện việc này bằng cách sử dụng hàm JSON.parse () .

Để chuyển đổi ví dụ trong phần JSON.stringify () ở trên, chúng tôi sẽ chuyển chuỗi s vào hàm và gán chuỗi đó cho một biến mới: < / p>

  

var

o

=

JSON

.> phân tích cú pháp

(

s

)

Sau đó, chúng tôi sẽ có đối tượng o để làm việc, đối tượng này sẽ giống với đối tượng obj

Để xem xét sâu hơn, hãy xem xét một ví dụ về JSON.parse () trong ngữ cảnh của tệp HTML:

  

& lt ;!

LOẠI TÀI LIỆU

html

& gt;

& lt;

html

& gt; < / p>

& lt;

body

& gt; < / p>

& lt;

p

id

=

"

người dùng

"

& gt;

& lt; /

p

& gt;

& lt;

script

& gt; < / p>

var

s

=

'{"first_name": "Sammy", "last_name "": "Shark", "location": "Ocean"} '

;

var

obj

=

JSON

.

phân tích cú pháp

(

s

)

;

document

.

getElementById

(

" người dùng "

)

.

innerHTML

= p>

"Tên:"

+

obj

.

first_name

"" "

+

obj

.

last_name

+

"& lt; mang;"

+

"Vị trí:"

+

obj

.

vị trí

;

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;

  

Đầu ra

Tên: Sammy Shark Vị trí: Đại dương

Trong ngữ cảnh của tệp HTML, chúng ta có thể thấy cách chuỗi JSON s được chuyển đổi thành một đối tượng có thể truy xuất được trong lần hiển thị cuối cùng của trang bằng cách truy cập JSON qua ký hiệu dấu chấm

JSON.parse () là một hàm bảo mật phân tích cú pháp các chuỗi JSON và chuyển đổi chúng thành các đối tượng.

Kết luận

JSON là một định dạng tự nhiên để sử dụng trong JavaScript và có nhiều triển khai có sẵn để sử dụng trong nhiều ngôn ngữ lập trình phổ biến. Nếu muốn sử dụng định dạng bằng ngôn ngữ lập trình khác, bạn có thể xem hỗ trợ ngôn ngữ đầy đủ trên trang web “ Giới thiệu JSON ”.

Bởi vì nó nhẹ và dễ dàng được chuyển giữa các ngôn ngữ lập trình và hệ thống, JSON đã được hỗ trợ nhiều hơn trong nhiều API, bao gồm cả Twitter API

Bạn có thể sẽ không tạo các tệp .json của riêng mình mà mua chúng từ các nguồn khác. Bạn có thể xem tài nguyên này để tìm hiểu về cách chuyển đổi các cấu trúc dữ liệu khác sang JSON.


Xem thêm những thông tin liên quan đến chủ đề phân tích cú pháp json bằng javascript

Faster Apps With JSON.parse

  • Tác giả: Coding Tech
  • Ngày đăng: 2019-11-29
  • Đánh giá: 4 ⭐ ( 1865 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Because the JSON grammar is much simpler than JavaScript’s grammar, JSON can be parsed more efficiently than JavaScript. This knowledge can be applied to improve start-up performance for web apps that ship large JSON-like configuration object literals (such as inline Redux stores).

    EVENT:

    Chrome Dev Summit 2019

    SPEAKER:

    Mathias Bynens

    PUBLICATION PERMISSIONS:

    Original video was published with the Creative Commons Attribution license (reuse allowed)

    ATTRIBUTION CREDITS:

    Original video source: https://www.youtube.com/watch?v=ff4fgQxPaO0

Phương thức phân tích cú pháp JavaScript JSON ()

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 5 ⭐ ( 9462 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: botvietbai.com cung cấp các hướng dẫn, tài liệu tham khảo và bài tập trực tuyến miễn phí bằng tất cả các ngôn ngữ chính của web. Bao gồm các chủ đề phổ biến như HTML, CSS, JavaScript, Python, SQL, Java, và nhiều hơn nữa.

JSON là gì? Sử dụng JSON như thế nào?

  • Tác giả: hocjavascript.net
  • Đánh giá: 3 ⭐ ( 7393 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JSON viết tắt từ JavaScript Object Notation, là một định dạng dữ liệu dựa trên văn bản được sử dụng để lưu trữ và trao đổi dữ liệu. File chỉ

Phân tích cú pháp JSON với Node.js

  • Tác giả: tech-wiki.online
  • Đánh giá: 5 ⭐ ( 1428 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

JSON Cơ Bản Cho Lập Trình Viên Front-End

  • Tác giả: hocspringmvc.net
  • Đánh giá: 3 ⭐ ( 4030 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, chúng ta sẽ cùng tìm hiểu những khía cạnh cơ bản về JSON. Chúng ta sẽ bắt đầu khám phá những gì liên quan đến nó

Cách phân tích cú pháp dữ liệu JSON từ API REST bằng thư viện JSON đơn giản

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 6532 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trước khi bắt đầu, tôi muốn độc giả của mình hiểu trước API dựa trên JSON là gì. JSON (JavaScript Object Notation) là một định dạng trao đổi dữ liệu nhẹ hiện đang được sử dụng như một cách…

JSON: Cú pháp JSON

  • Tác giả: v1study.com
  • Đánh giá: 4 ⭐ ( 1799 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cú pháp JSON là một tập hợp con của cú pháp JavaScript. Quy tắc cú pháp JSON Cú pháp JSON bắt nguồn từ cú pháp ký hiệu đối tượng JavaScript: Dữ liệu nằm

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  C ++ Độ dài của mảng - đếm độ dài của mảng

By ads_php