Nội dung chính
Xem Thanh tìm kiếm JavaScript JSON 2024
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
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
superHeroes['members'][1]['powers'][2]
8 cốt lõi để tìm kiếm chuỗi trong các đối tượng mảng JSON. Bạn có thể sử dụng đoạn mã này từ bất kỳ đâu và với bất kỳ ứng dụng ngôn ngữ lập trình nào hỗ trợ JavaScript
Bạn cũng có thể xem các hướng dẫn khác về Đối tượng JSON,
- Ví dụ jQuery jqGrid với dữ liệu JSON sử dụng Rest Service
- Tìm kiếm trực tiếp trên Dữ liệu đối tượng JSON bằng jQuery
- Cách xử lý/lặp lại các đối tượng JSON trong JavaScript
- Đối tượng dữ liệu JSON Sử dụng và ví dụ sử dụng Javascript
quảng cáo
Các bước đơn giản để tạo Tìm kiếm trực tiếp bằng JSON và jQuery
Hã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
superHeroes['members'][1]['powers'][2]
9 và viết mã tất cả các bước bên dưới vào tệp này
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
superHeroes['members'][1]['powers'][2]
9
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
superHeroes.homeTown
superHeroes['active']
1. Chúng tôi sẽ tìm kiếm các chuỗi trong dữ liệu json này và trả về các đối tượng dữ liệu json đã lọc dưới dạng phản hồi
Chức năng cấp cao nhất trông như thế này
superHeroes.homeTown
superHeroes['active']
1
Để 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ủ
- chúng tôi khai báo biến
superHeroes['members'][1]['powers'][2]5 để lưu trữ URL GitHub
- chúng tôi sử dụng URL để khởi tạo một đối tượng
superHeroes['members'][1]['powers'][2]6 mới
- chúng tôi thực hiện yêu cầu mạng bằng hàm
superHeroes['members'][1]['powers'][2]7 và điều này trả về một đối tượng
superHeroes['members'][1]['powers'][2]8
- chúng tôi truy xuất phản hồi dưới dạng JSON bằng cách sử dụng hàm
superHeroes['members'][1]['powers'][2]9 của đối tượng
superHeroes['members'][1]['powers'][2]8
Ghi chú. API
superHeroes['members'][1]['powers'][2]
7 không đồng bộ. Chúng ta sẽ tìm hiểu nhiều về các hàm không đồng bộ trong mô-đun tiếp theo, nhưng bây giờ, chúng ta sẽ chỉ nói rằng chúng ta cần thêm từ khóa
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
superHeroes.homeTown
superHeroes['active']
3 sẽ chứa đối tượng JavaScript dựa trên JSON. Sau đó, chúng tôi sẽ chuyển đối tượng đó tới hai lệnh gọi hàm – lệnh đầu tiên điền vào
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
superHeroes.homeTown
superHeroes['active']
4
Ở đâ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
superHeroes.homeTown
superHeroes['active']
00 của đối tượng, sau đó nối nó vào tiêu đề bằng cách sử dụng
superHeroes.homeTown
superHeroes['active']
01. Sau đó, chúng tôi thực hiện một thao tác rất giống với một đoạn văn. tạo nó, đặt nội dung văn bản của nó và nối nó vào tiêu đề. Sự khác biệt duy nhất là văn bản của nó được đặt thành một mẫu chữ chứa cả thuộc tính
superHeroes.homeTown
superHeroes['active']
02 và
superHeroes.homeTown
superHeroes['active']
03 của đối tượng
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
{
"squadName": "Super hero squad",
"homeTown": "Metro City",
"formed": 2016,
"secretBase": "Super tower",
"active": true,
"members": [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
"name": "Eternal Flame",
"age": 1000000,
"secretIdentity": "Unknown",
"powers": [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
}
2
Để bắt đầu, chúng tôi lưu trữ thuộc tính
superHeroes.homeTown
superHeroes['active']
5 của đối tượng JavaScript trong một biến mới. Mảng này chứa nhiều đối tượng chứa thông tin cho từng anh hùng
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
- Tạo một số yếu tố mới. một
superHeroes.homeTown superHeroes['active']05, một
superHeroes.homeTown superHeroes['active']06, ba
superHeroes.homeTown superHeroes['active']07 và một
superHeroes.homeTown superHeroes['active']08
- Đặt
superHeroes.homeTown superHeroes['active']06 để chứa
superHeroes.homeTown superHeroes['active']10 của anh hùng hiện tại
- Điền vào ba đoạn văn bằng
superHeroes.homeTown superHeroes['active']11,
superHeroes.homeTown superHeroes['active']12 của họ và một dòng có nội dung “Siêu năng lực. ” để giới thiệu thông tin trong danh sách
- Lưu trữ thuộc tính
superHeroes.homeTown superHeroes['active']9 trong một hằng số mới khác có tên là
superHeroes.homeTown superHeroes['active']14 — hằng số này chứa một mảng liệt kê các siêu năng lực của anh hùng hiện tại
- Sử dụng một vòng lặp
superHeroes.homeTown superHeroes['active']15 khác để lặp qua siêu năng lực của anh hùng hiện tại — đối với mỗi phần tử, chúng ta tạo một phần tử
superHeroes.homeTown superHeroes['active']16, đặt siêu năng lực bên trong nó, sau đó đặt
superHeroes.homeTown superHeroes['active']17 bên trong phần tử
superHeroes.homeTown superHeroes['active']08 (
superHeroes.homeTown superHeroes['active']19) bằng cách sử dụng
superHeroes.homeTown superHeroes['active']01
- Điều cuối cùng chúng ta làm là nối các ________ 206, ________ 207 và ________ 208 vào bên trong
superHeroes.homeTown superHeroes['active']05 (
superHeroes.homeTown superHeroes['active']45), sau đó nối thêm
superHeroes.homeTown superHeroes['active']05 vào bên trong
76. Thứ tự các thứ được thêm vào rất quan trọng, vì đây là thứ tự chúng sẽ được hiển thị bên trong HTML
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
superHeroes.homeTown
superHeroes['active']
48 cấp cao nhất của mình
superHeroes.homeTown
superHeroes['active']
8
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
superHeroes.homeTown
superHeroes['active']
49
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
{ "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"] }, { "name": "Madame Uppercut", "age": 39, "secretIdentity": "Jane Wilson", "powers": [ "Million tonne punch", "Damage resistance", "Superhuman reflexes" ] }, { "name": "Eternal Flame", "age": 1000000, "secretIdentity": "Unknown", "powers": [ "Immortality", "Heat Immunity", "Inferno", "Teleportation", "Interdimensional travel" ] } ] }20. Chấp nhận một chuỗi JSON làm tham số và trả về đối tượng JavaScript tương ứng
{ "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"] }, { "name": "Madame Uppercut", "age": 39, "secretIdentity": "Jane Wilson", "powers": [ "Million tonne punch", "Damage resistance", "Superhuman reflexes" ] }, { "name": "Eternal Flame", "age": 1000000, "secretIdentity": "Unknown", "powers": [ "Immortality", "Heat Immunity", "Inferno", "Teleportation", "Interdimensional travel" ] } ] }21. Chấp nhận một đối tượng làm tham số và trả về chuỗi JSON tương đương
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 đó
- chúng tôi truy xuất phản hồi dưới dạng văn bản thay vì JSON, bằng cách gọi phương thức
{ "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"] }, { "name": "Madame Uppercut", "age": 39, "secretIdentity": "Jane Wilson", "powers": [ "Million tonne punch", "Damage resistance", "Superhuman reflexes" ] }, { "name": "Eternal Flame", "age": 1000000, "secretIdentity": "Unknown", "powers": [ "Immortality", "Heat Immunity", "Inferno", "Teleportation", "Interdimensional travel" ] } ] }22 của phản hồi
- sau đó chúng tôi sử dụng
{ "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"] }, { "name": "Madame Uppercut", "age": 39, "secretIdentity": "Jane Wilson", "powers": [ "Million tonne punch", "Damage resistance", "Superhuman reflexes" ] }, { "name": "Eternal Flame", "age": 1000000, "secretIdentity": "Unknown", "powers": [ "Immortality", "Heat Immunity", "Inferno", "Teleportation", "Interdimensional travel" ] } ] }20 để chuyển đổi văn bản thành đối tượng JavaScript
Đoạn mã chính ở đây
superHeroes['members'][1]['powers'][2]
4
Như bạn có thể đoán,
{
"squadName": "Super hero squad",
"homeTown": "Metro City",
"formed": 2016,
"secretBase": "Super tower",
"active": true,
"members": [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
"name": "Eternal Flame",
"age": 1000000,
"secretIdentity": "Unknown",
"powers": [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
}
21 hoạt động theo cách ngược lại. Hãy thử nhập từng dòng sau vào bảng điều khiển JavaScript của trình duyệt của bạn để xem nó hoạt động như thế nào
superHeroes.homeTown
superHeroes['active']
0
Ở đâ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
{
"squadName": "Super hero squad",
"homeTown": "Metro City",
"formed": 2016,
"secretBase": "Super tower",
"active": true,
"members": [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
"name": "Eternal Flame",
"age": 1000000,
"secretIdentity": "Unknown",
"powers": [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
}
21 — lưu giá trị trả về vào một biến mới — sau đó kiểm tra lại
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 để thêm thanh tìm kiếm trong 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àm cách nào để tìm kiếm khóa trong JSON?
Bạn đang tìm hiểu bài viết: Thanh tìm kiếm JavaScript JSON 2024
HỆ THỐNG CỬA HÀNG TRÙM SỈ QUẢNG CHÂU
Điện thoại: 092.484.9483
Zalo: 092.484.9483
Facebook: https://facebook.com/giatlathuhuongcom/
Website: Trumsiquangchau.com
Địa chỉ: Ngõ 346 Nam Dư, Trần Phú, Hoàng Mai, Hà Nội.
