Trong bài viết này, chúng tôi sẽ mở tệp JSON bằng JavaScript. JSON là viết tắt của Ký hiệu đối tượng JavaScript. Về cơ bản nó là một định dạng để cấu trúc dữ liệu. Định dạng JSON là định dạng dựa trên văn bản để biểu thị dữ liệu dưới dạng đối tượng JavaScript
Tiếp cận
- Tạo tệp JSON, thêm dữ liệu vào tệp JSON đó
- Sử dụng JavaScript tìm nạp tệp JSON đã tạo bằng phương thức tìm nạp []
- Hiển thị dữ liệu trên bàn điều khiển hoặc trong cửa sổ
Để tạo một tệp JSON
- Mở trình soạn thảo văn bản, ví dụ: Visual Studio Code, v.v.
- Tạo một tệp mới và thêm dữ liệu vào đó
- Lưu tập tin này với “. phần mở rộng json”
Ghi chú. Chúng tôi đang sử dụng tệp HTML để sử dụng JavaScript trong thẻ script
ví dụ 1. Để hiển thị dữ liệu trong bảng điều khiển. Đầu tiên tạo một tệp JSON với “. json”, ở đây chúng tôi đã đặt tên nó là tải. json với đoạn mã sau trong đó
{ "users":[ { "site":"GeeksForGeeks", "user": "Anurag Singh" } ] }
Bây giờ, tạo một tệp HTML để sử dụng mã JavaScript
HTML
đầu ra. Trong đoạn code trên, chúng ta đã tạo một nút “Hiển thị chi tiết”, khi chúng ta bấm vào nút này thì chức năng “Func” được thực thi. Chức năng Func này về cơ bản là tìm nạp các chi tiết từ “tải. tập tin json”.
Phương thức fetch[] trả về một lời hứa, một lời hứa thực sự là một đối tượng đại diện cho một kết quả trong tương lai. Phương thức then[] được sử dụng để chờ phản hồi từ phía máy chủ và đăng nhập vào bảng điều khiển
Cửa sổ
Bảng điều khiển
ví dụ 2. Để hiển thị dữ liệu trên cửa sổ. Chúng tôi đang sử dụng cùng một tệp JSON được sử dụng trong Ví dụ 1
HTML
5
>
5
3
body
>
>
3html
>
đầu ra. Trong đoạn mã trên, chúng tôi đã sử dụng cùng một cách tiếp cận như chúng tôi đã sử dụng trong Ví dụ 1, ở đây chúng tôi đã tìm nạp dữ liệu từ “load. tập tin json”. Chúng tôi đã chọn id "chi tiết" sau đó hiển thị dữ liệu đã tìm nạp trong cửa sổ bằng thuộc tính InternalHTML