Thanh tìm kiếm JavaScript JSON
|
JSON là một định dạng dữ liệu rất phổ biến để trao đổi dữ liệu giữa các ứng dụng hoặc nền tảng ngôn ngữ lập trình chéo Show Hướng dẫn này giúp tìm kiếm trực tiếp trên các đối tượng dữ liệu JSON bằng cách sử dụng jquery và JavaScript. Chúng ta sẽ tìm kiếm các khóa chuỗi trong mảng của đối tượng JSON và hiển thị chúng theo bố cục HTML, giống như tìm kiếm trực tiếp trong danh sách bạn bè trên Facebook Chúng tôi sẽ sử dụng hàm JavaScript và jQuery Bạn cũng có thể xem các hướng dẫn khác về Đối tượng JSON,
Các bước đơn giản để tạo Tìm kiếm trực tiếp bằng JSON và jQueryHãy tạo một dự án 'tìm kiếm trực tiếp' có thể được đặt ở bất kỳ đâu trên máy tính của bạn. Tạo tệp Bước 1. Chúng tôi cần một dữ liệu json mẫu để tìm kiếm trực tiếp. Chúng tôi đang lấy dữ liệu JSON mẫu bên dưới và thêm vào phần đầu của tệp var data = [
{
"id":"1",
"employee_name":"Tiger Nixon",
"employee_salary":"320800",
"employee_age":"61",
"profile_image":"default_profile.png"
},
{
"id":"2",
"employee_name":"Garrett Winters",
"employee_salary":"434343",
"employee_age":"63",
"profile_image":"default_profile.png"
},
{
"id":"3",
"employee_name":"Ashton Cox",
"employee_salary":"86000",
"employee_age":"66",
"profile_image":"default_profile.png"
},
{
"id":"4",
"employee_name":"Cedric Kelly",
"employee_salary":"433060",
"employee_age":"22",
"profile_image":"default_profile.png"
}
];
Các đối tượng dữ liệu JSON được lưu trữ ở trên vào biến JavaScript  Chức năng cấp cao nhất trông như thế này Để có được JSON, chúng tôi sử dụng API có tên là Fetch. API này cho phép chúng tôi thực hiện các yêu cầu mạng để truy xuất tài nguyên từ máy chủ thông qua JavaScript (e. g. hình ảnh, văn bản, JSON, thậm chí cả đoạn mã HTML), nghĩa là chúng tôi có thể cập nhật các phần nội dung nhỏ mà không phải tải lại toàn bộ trang Trong chức năng của chúng tôi, bốn dòng đầu tiên sử dụng Fetch API để tìm nạp JSON từ máy chủ
Ghi chú. API 72 trước tên của hàm sử dụng API tìm nạp và thêm từ khóa 73 trước Sau tất cả, biến 75 với dữ liệu chính xác, trong khi lệnh thứ hai tạo một thẻ thông tin cho mỗi anh hùng trong đội và chèn nó vào 76 Bây giờ chúng ta đã truy xuất dữ liệu JSON và chuyển đổi nó thành một đối tượng JavaScript, hãy tận dụng nó bằng cách viết hai hàm mà chúng ta đã tham chiếu ở trên. Trước hết, hãy thêm định nghĩa hàm sau vào bên dưới đoạn mã trước Ở đây, trước tiên chúng ta tạo một phần tử 77 với 78, đặt 79 của nó bằng thuộc tính Tiếp theo, thêm chức năng sau vào cuối mã để tạo và hiển thị các thẻ siêu anh hùng Để bắt đầu, chúng tôi lưu trữ thuộc tính Tiếp theo, chúng ta sử dụng a để lặp qua từng đối tượng trong mảng. Đối với mỗi người, chúng tôi
Ghi chú. Nếu bạn gặp khó khăn trong việc làm cho ví dụ hoạt động, hãy thử tham khảo các anh hùng đã hoàn thành của chúng tôi. mã nguồn html (cũng thấy nó chạy trực tiếp. ) Ghi chú. Nếu bạn gặp sự cố khi tuân theo ký hiệu dấu chấm/dấu ngoặc vuông mà chúng tôi đang sử dụng để truy cập đối tượng JavaScript, thì việc có các siêu anh hùng có thể hữu ích. json mở trong tab khác hoặc trình soạn thảo văn bản của bạn và tham khảo nó khi bạn xem JavaScript của chúng tôi. Bạn cũng nên tham khảo lại bài viết cơ bản về đối tượng JavaScript của chúng tôi để biết thêm thông tin về ký hiệu dấu chấm và dấu ngoặc Cuối cùng, chúng ta cần gọi hàm Ví dụ trên rất đơn giản về mặt truy cập đối tượng JavaScript, bởi vì chúng tôi đã chuyển đổi phản hồi mạng trực tiếp thành đối tượng JavaScript bằng cách sử dụng Nhưng đôi khi chúng tôi không may mắn như vậy — đôi khi chúng tôi nhận được một chuỗi JSON thô và chúng tôi cần tự chuyển đổi nó thành một đối tượng. Và khi chúng tôi muốn gửi một đối tượng JavaScript trên mạng, chúng tôi cần chuyển đổi nó thành JSON (một chuỗi) trước khi gửi nó. May mắn thay, hai vấn đề này rất phổ biến trong quá trình phát triển web nên có sẵn một đối tượng JSON tích hợp sẵn trong trình duyệt, chứa hai phương thức sau
Bạn có thể thấy cái đầu tiên đang hoạt động trong Heroes-finished-json-parse của chúng tôi. html (xem mã nguồn) — điều này thực hiện chính xác như ví dụ mà chúng tôi đã xây dựng trước đó, ngoại trừ điều đó
Đoạn mã chính ở đây Như bạn có thể đoán, Ở đây chúng ta đang tạo một đối tượng JavaScript, sau đó kiểm tra xem nó chứa gì, sau đó chuyển đổi nó thành một chuỗi JSON bằng cách sử dụng Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . JSON Trong bài viết này, chúng tôi đã cung cấp cho bạn hướng dẫn đơn giản về cách sử dụng JSON trong chương trình của bạn, bao gồm cách tạo và phân tích cú pháp JSON cũng như cách truy cập dữ liệu bị khóa bên trong nó. Trong bài viết tiếp theo, chúng ta sẽ bắt đầu xem xét JavaScript hướng đối tượng Làm cách nào để tìm kiếm JSON bằng JavaScript?Làm cách nào để tìm kiếm tệp JSON? . $('#lấy dữ liệu'). click(function() { //get-data sẽ là id nút của bạn var url="/Json/Người dùng. json"; $. getJSON(url, function (data) { //phương thức này lấy tệp json và tìm nạp dữ liệu bên trong nó bảng điều khiển. nhật ký (dữ liệu); Làm cách nào để thêm thanh tìm kiếm trong JavaScript?Sử dụng JavaScript
. onkeyup gọi chức năng này mỗi khi nhả phím trên bàn phím. Trước tiên, chúng tôi nhận đầu vào của mình bằng cách sử dụng getElementById. In the HTML code of search bar, we gave the input an id=”searchbar” and onkeyup we called, the function “search_animal”. onkeyup calls the function every time a key is released on the keyboard. We first get our input using getElementById.
Làm cách nào để tìm kiếm mảng JSON trong JavaScript?Để lấy chỉ mục của phần tử tìm thấy trong mảng, findIndex() được sử dụng Để lấy chỉ số giá trị, Array. nguyên mẫu. indexOf() được sử dụng Để kiểm tra xem một giá trị có tồn tại trong mảng hay không, Array. nguyên mẫu. bao gồm() được sử dụng Để tìm bất kỳ phần tử nào thỏa mãn chức năng kiểm tra được cung cấp, Array. nguyên mẫu Làm cách nào để tìm kiếm khóa trong JSON?Nhấp chuột phải vào văn bản đã chọn và chọn tùy chọn. Tìm khóa trong JSON . |
