HTML và JSON
|
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tìm nạp và hiển thị dữ liệu từ tệp JSON bằng vanilla JavaScript Show Vậy làm thế nào chúng ta sẽ đạt được điều này? Đầu tiên, chúng tôi sẽ tìm nạp dữ liệu JSON bằng cách sử dụng API tìm nạp. Điều này sẽ trả lại một lời hứa với dữ liệu JSON của chúng tôi. Sau đó, chúng tôi sẽ tự động nối dữ liệu bằng cách tạo các phần tử HTML một cách nhanh chóng. Sau đó, chúng tôi sẽ nối dữ liệu JSON của mình vào các phần tử đó Lấy dữ liệu JSON từ API và hiển thị nó trên trang web là điều phổ biến bạn sẽ làm khá thường xuyên. Tôi đã tạo các bài viết tương tự trên các framework lớn như React, Vue và Angular. Kiểm tra xem bạn có đang sử dụng bất kỳ khung nào trong số đó không Bắt đầu nào Đầu tiên, tạo một tệp fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});1 và điền vào đó các dữ liệu sau[
{
"id": "1",
"firstName": "John",
"lastName": "Doe"
},
{
"id": "2",
"firstName": "Mary",
"lastName": "Peterson"
},
{
"id": "3",
"firstName": "George",
"lastName": "Hansen"
}
]Chúng tôi sẽ lưu tệp này trong cùng thư mục với tệp fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});2 của chúng tôiMục lục ẩn 1 Tìm nạp dữ liệu JSON 2 Hiển thị dữ liệu JSON 2. 1 Bước 1 – Lấy phần tử div từ phần thân 2. 2 Bước 2 – Lặp qua mọi đối tượng trong đối tượng JSON của chúng tôi 2. 3 Bước 3 – Nối từng người vào trang HTML của chúng tôi 3 Tại sao lại sử dụng Vanilla JavaScript? Tìm nạp dữ liệu JSONĐể có thể hiển thị dữ liệu này trong tệp HTML của chúng tôi, trước tiên chúng tôi cần tìm nạp dữ liệu bằng JavaScript Chúng tôi sẽ tìm nạp dữ liệu này bằng cách sử dụng API tìm nạp. Chúng tôi sử dụng fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});3 theo cách saufetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});Tham số ____04được sử dụng trong hàm_______05là nơi chúng tôi lấy dữ liệu JSON. Đây thường là một địa chỉ http. Trong trường hợp của chúng tôi, nó chỉ là tên tệp_______01. Chúng tôi không phải đi sâu vào bất kỳ thư mục nào vì tệp json nằm trong cùng thư mục vớiour fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});2Hàm fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});5 sẽ trả về một lời hứa. Khi dữ liệu JSON được tìm nạp từ tệp, hàm fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});9 sẽ chạy với dữ liệu JSON trong phản hồiNếu có vấn đề gì xảy ra (như không tìm thấy file JSON) thì hàm [
{
"id": "1",
"firstName": "John",
"lastName": "Doe"
},
{
"id": "2",
"firstName": "Mary",
"lastName": "Peterson"
},
{
"id": "3",
"firstName": "George",
"lastName": "Hansen"
}
]10 sẽ chạyHãy để chúng tôi xem điều này sẽ trông như thế nào trong ví dụ [
{
"id": "1",
"firstName": "John",
"lastName": "Doe"
},
{
"id": "2",
"firstName": "Mary",
"lastName": "Peterson"
},
{
"id": "3",
"firstName": "George",
"lastName": "Hansen"
}
]1Ở đây chúng tôi đang tìm nạp tệp fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});1 của mình. Sau khi tệp đã được đọc từ đĩa, chúng tôi chạy hàm fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});9 với phản hồi dưới dạng tham số. Để lấy dữ liệu JSON từ phản hồi, chúng tôi thực hiện chức năng [
{
"id": "1",
"firstName": "John",
"lastName": "Doe"
},
{
"id": "2",
"firstName": "Mary",
"lastName": "Peterson"
},
{
"id": "3",
"firstName": "George",
"lastName": "Hansen"
}
]13Hàm [
{
"id": "1",
"firstName": "John",
"lastName": "Doe"
},
{
"id": "2",
"firstName": "Mary",
"lastName": "Peterson"
},
{
"id": "3",
"firstName": "George",
"lastName": "Hansen"
}
]13 cũng trả về một lời hứa. Đây là lý do tại sao chúng tôi chỉ trả lại nó và xâu chuỗi một hàm fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});9 khác. Trong hàm fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});9 thứ hai, chúng tôi lấy dữ liệu JSON thực tế làm tham số. Dữ liệu này trông giống như dữ liệu trong tệp JSON của chúng tôiBây giờ chúng tôi có thể lấy dữ liệu này và hiển thị nó trên trang HTML của chúng tôi. Lưu ý rằng chúng ta đang gọi một hàm có tên là [
{
"id": "1",
"firstName": "John",
"lastName": "Doe"
},
{
"id": "2",
"firstName": "Mary",
"lastName": "Peterson"
},
{
"id": "3",
"firstName": "George",
"lastName": "Hansen"
}
]17. Đây là nơi chúng tôi tạo mã sẽ nối dữ liệu vào trang của chúng tôiLưu ý rằng trong chức năng [
{
"id": "1",
"firstName": "John",
"lastName": "Doe"
},
{
"id": "2",
"firstName": "Mary",
"lastName": "Peterson"
},
{
"id": "3",
"firstName": "George",
"lastName": "Hansen"
}
]10 của chúng tôi, chúng tôi chỉ viết thông báo lỗi ra bảng điều khiển. Thông thường, bạn sẽ hiển thị thông báo lỗi cho người dùng nếu xảy ra sự cốHiển thị dữ liệu JSONTrước khi chúng tôi hiển thị dữ liệu JSON của mình trên trang web, hãy xem phần thân của tệp fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});2 của chúng tôi trông như thế nàofetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});2Khá đơn giản phải không? . Kế hoạch của chúng tôi là điền dữ liệu JSON của chúng tôi vào bên trong div này một cách linh hoạt Có một số cách để hiển thị dữ liệu trong HTML của chúng tôi. Chúng ta có thể tạo một bảng và làm cho nó trông thật đẹp với kiểu dáng đẹp. Tuy nhiên, chúng tôi sẽ làm điều này một cách đơn giản và xấu xí Mục tiêu của chúng tôi là chỉ hiển thị tên đầy đủ của những người trong tệp JSON của chúng tôi Bước 1 – Lấy phần tử div từ phần thânHãy nhớ div có id fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});20 từfetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});2 của chúng tôi?Chúng tôi muốn tìm nạp div đó bằng JavaScript. Chúng tôi cần điều này vì chúng tôi sẽ điền div với những người trong tệp JSON của chúng tôiĐây là cách chúng tôi sẽ làm điều đó fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});6Chúng tôi nhận được phần tử bằng cách thực hiện chức năng fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});23. Điều này sẽ tìm thấy phần tử có id fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});20. Đây là vanilla JavaScript và đây là cách chúng tôi phát triển giao diện người dùng trong những ngày “cũ”. )Bước 2 – Lặp qua mọi đối tượng trong đối tượng JSON của chúng taBước tiếp theo là tạo một vòng lặp đơn giản. Sau đó, chúng tôi có thể lấy mọi đối tượng trong danh sách đối tượng JSON của mình và nối nó vào div chính của chúng tôi fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});9Bước 3 – Nối từng người vào trang HTML của chúng tôiBên trong vòng lặp for, chúng ta sẽ thêm từng người vào bên trong div của chính nó. Mã này sẽ được lặp lại ba lần cho mỗi người Đầu tiên, chúng ta sẽ tạo một phần tử div mới fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});0Tiếp theo, chúng tôi sẽ điền vào div đó tên đầy đủ từ tệp JSON của chúng tôi fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});1Cuối cùng, chúng tôi sẽ nối div này vào vùng chứa chính của chúng tôi fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});2Đó là nó. Bây giờ chúng tôi đã hoàn thành việc thêm dữ liệu JSON vào chỉ mục của mình. trang html. Chức năng đầy đủ của [
{
"id": "1",
"firstName": "John",
"lastName": "Doe"
},
{
"id": "2",
"firstName": "Mary",
"lastName": "Peterson"
},
{
"id": "3",
"firstName": "George",
"lastName": "Hansen"
}
]17 trông như thế nàyfetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});4Khi chúng tôi chạy chỉ mục của chúng tôi. trang html, nó sẽ giống như thế này Không phải là ứng dụng đẹp nhất, nhưng nó đã hoàn thành công việc Chúng ta hãy xem toàn bộ tệp HTML bằng JavaScript fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});0Hãy thử sao chép và dán cái này vào trình chỉnh sửa của riêng bạn. Như một bài tập, bạn có thể thử tạo kiểu cho đầu ra trông đẹp hơn. Hãy nhớ bao gồm cả tệp fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});1. Tệp này phải nằm trong cùng thư mục với tệp fetch(url)
.then(function (response) {
// The JSON data will arrive here
})
.catch(function (err) {
// If an error occured, you will catch it here
});2 của bạn để tệp này hoạt độngTại sao nên sử dụng Vanilla JavaScript?Bạn có thể tự hỏi mục đích của việc tạo ra cái này trong vani JavaScript là gì. Ứng dụng web hiện đại không sử dụng các framework và thư viện như Angular, ReactJS hay VueJS sao? Vâng, vâng, bạn có thể đúng, hầu hết thời gian. Nhưng một số trang web chỉ là tĩnh với rất ít logic Nếu bạn chỉ muốn chỉnh sửa một số phần nhỏ của trang web, thì việc đưa vào các thư viện lớn có thể là quá mức cần thiết, điều này sẽ làm chậm trang web Bên cạnh đó, các khuôn khổ và thư viện đến và đi. JavaScript vani cũ tốt vẫn ở đây. Vì vậy, hãy tận dụng mọi cơ hội để học nó, bạn không biết khi nào bạn có thể cần đến nó Sự khác biệt giữa HTML và JSON là gì?JSON Rich Text Editor lưu trữ nội dung ở định dạng văn bản thuần túy, có thể được hiểu và xử lý bởi tất cả các ngôn ngữ lập trình. Trong khi HTML RTE bị giới hạn và ràng buộc đối với đánh dấu HTML
JSON có thể được sử dụng trong HTML không?JSON có thể được dịch sang JavaScript rất dễ dàng . JavaScript có thể được sử dụng để tạo HTML trong các trang web của bạn.
Làm cách nào để chuyển HTML trong JSON?4 Điều Bạn Phải Làm Khi Đưa HTML vào JSON. . Escape quotation marks used around HTML attributes like so ![](\"someimage.png\") .Thoát khỏi dấu gạch chéo về phía trước trong các thẻ kết thúc HTML. . Điều này là hoàn toàn kỳ lạ. . Đảm bảo mã hóa bất kỳ dấu ngoặc kép nào có thể được đưa vào nội dung HTML (xấu) JSON được sử dụng để làm gì?Ký hiệu đối tượng JavaScript (JSON) là định dạng dựa trên văn bản tiêu chuẩn để biểu thị dữ liệu có cấu trúc dựa trên cú pháp đối tượng JavaScript. Nó thường được sử dụng để truyền dữ liệu trong các ứng dụng web (e. g. , gửi một số dữ liệu từ máy chủ đến máy khách, để nó có thể được hiển thị trên trang web hoặc ngược lại). |
