Làm cách nào để tạo biểu mẫu HTML từ dữ liệu JSON?

Tôi có một tình yêu, nhưng đôi khi ghét, mối quan hệ với Biểu mẫu HTML. Biểu mẫu HTML hoàn toàn tuyệt vời để xác thực, khả năng truy cập và khả năng sử dụng ngoài hộp. Nhưng họ có thể là một nỗi đau để phong cách. Tuy nhiên, Biểu mẫu HTML cung cấp cho bạn số lượng lớn chức năng mà không phụ thuộc

Nếu bạn giống tôi, bạn thích API của mình dựa trên JSON hơn. Làm cho việc xử lý các yêu cầu và phản hồi trên phần phụ trợ trở nên dễ dàng và nhất quán hơn. Bạn có thể thêm một phần mềm trung gian vào điểm cuối API sẽ xử lý Giao diện người dùng biểu mẫu của bạn nhưng tại sao lại làm cho điểm cuối đó khác với phần còn lại?

Điều gì sẽ xảy ra nếu bạn có thể gửi dữ liệu Biểu mẫu của mình ở định dạng JSON và xử lý nó giống như tất cả các điểm cuối khác của bạn. Bây giờ bạn có thể

TLDR;

Dữ liệu biểu mẫu

Giới thiệu FormData, đây là một API Web thực sự hay để thao tác dữ liệu trong Biểu mẫu HTML

Điều này cho phép chúng tôi dễ dàng chuyển đổi Biểu mẫu HTML thành JSON bằng cách sử dụng như sau

1. Lấy phần tử biểu mẫu từ DOM

const formElement = document.querySelector('form')

1. Truyền biểu mẫu cho chức năng sau

/** * Creates a json object including fields in the form * * @param {HTMLElement} form The form element to convert * @return {Object} The form data */ const getFormJSON = (form) => { const data = new FormData(form); return Array.from(data.keys()).reduce((result, key) => { result[key] = data.get(key); return result; }, {}); };

1. Thao tác với kết quả Đối tượng JSON, tuy nhiên bạn muốn xử lý dữ liệu từ biểu mẫu. Gửi nó đi bằng Fetch chẳng hạn

Gotcha

Như với mọi thứ, đây là một vài vấn đề cần chú ý

hộp kiểm của

Nếu được đánh dấu, hộp kiểm của bạn sẽ xuất hiện trong kết quả là 'bật'. Có lẽ không phải là boolean bạn muốn. Ví dụ: nếu bạn có đầu vào này trong biểu mẫu của mình, mà người dùng đã kiểm tra

<input name="isOpen" type="checkbox" checked />

Nó sẽ tạo ra, sử dụng chức năng trên

{ "isOpen": "on" }

Bạn có thể sẽ muốn kiểm tra thuộc tính và nếu nó bằng 'bật' và chuyển đổi nó thành boolean

Tải lên tệp

Điều này thực sự khiến tôi chú ý, nếu bạn có đầu vào tệp chấp nhận nhiều tệp, như vậy

<input name="uploads" type="file" multiple />

Nếu một tệp được tải lên, bạn sẽ nhận được một đối tượng Tệp. Nhưng nếu bạn tải lên nhiều tệp, bạn sẽ thực sự nhận được một danh sách các tệp đó

May mắn thay, có một cách khắc phục thực sự đơn giản để cung cấp cho bạn danh sách các tệp một cách nhất quán. Lấy các tệp từ kết quả và xử lý chúng như vậy

[files].flat().filter((file) => !!file.name)

Điều này sẽ liên tục cung cấp cho bạn một danh sách các tệp, xử lý nếu chỉ một tệp được tải lên, không có tệp nào được tải lên hoặc nhiều tệp được tải lên

Điều này cũng có nghĩa là bạn cũng có thể thực hiện nhiều kiểm tra phía máy khách hơn về kích thước và giới hạn tệp chẳng hạn

Đầu vào có cùng tên

Giả sử bạn có một danh sách các thẻ có thể sử dụng và người dùng có thể đánh dấu vào những thẻ phù hợp, có thể họ biết ngôn ngữ lập trình nào, chẳng hạn như vậy

<input name="tags" type="checkbox" value="javascript" /> <input name="tags" type="checkbox" value="python" />

Với giải pháp hiện tại, bạn sẽ chỉ nhận được hộp kiểm được chọn cuối cùng vì các phím sẽ bị ghi đè trong phần giảm. Tuy nhiên, cũng có một cách khắc phục đơn giản cho việc này

Chúng tôi kiểm tra xem khóa (thuộc tính tên trên đầu vào) đã tồn tại trong kết quả chưa, nếu có thì sử dụng phương thức getAll sẽ nhận được danh sách kết quả

/** * Creates a json object including fields in the form * * @param {HTMLElement} form The form element to convert * @return {Object} The form data */ const getFormJSON = (form) => { const data = new FormData(form); return Array.from(data.keys()).reduce((result, key) => { if (result[key]) { result[key] = data.getAll(key) return result } result[key] = data.get(key); return result; }, {}); };

Tương tự, đối với tệp tải lên trước đó, bạn sẽ chỉ muốn xử lý một tệp được đánh dấu, không được đánh dấu hoặc nhiều tệp, với nội dung như thế này

________số 8

ví dụ

Im lặng và cho tôi xem mã

bản trình diễn tương tác

Ví dụ đơn giản

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <form name="forms" id="forms"> <label>Whats your username? <input name="username" type="text" /> </label> <label>How many years have you been a developer? <input name="age" type="number" /> </label> <button type="submit">Submit</button> </form> <script> // get the form element from dom const formElement = document.querySelector('form#forms') // convert the form to JSON const getFormJSON = (form) => { const data = new FormData(form); return Array.from(data.keys()).reduce((result, key) => { result[key] = data.get(key); return result; }, {}); }; // handle the form submission event, prevent default form behaviour, check validity, convert form to JSON const handler = (event) => { event.preventDefault(); const valid = formElement.reportValidity(); if (valid) { const result = getFormJSON(formElement); console.log(result) } } formElement.addEventListener("submit", handler) </script> </body>

Ví dụ đầy đủ

/** * Creates a json object including fields in the form * * @param {HTMLElement} form The form element to convert * @return {Object} The form data */ const getFormJSON = (form) => { const data = new FormData(form); return Array.from(data.keys()).reduce((result, key) => { result[key] = data.get(key); return result; }, {}); }; 0

Thưởng. Kiểm tra ví dụ

/** * Creates a json object including fields in the form * * @param {HTMLElement} form The form element to convert * @return {Object} The form data */ const getFormJSON = (form) => { const data = new FormData(form); return Array.from(data.keys()).reduce((result, key) => { result[key] = data.get(key); return result; }, {}); }; 1

Tóm lược

Tóm lại, bạn có thể sử dụng những gì trình duyệt cung cấp cho bạn để nhận được tất cả những lợi ích tuyệt vời của Biểu mẫu HTML, sau đó chuyển đổi nó thành JSON để làm việc với dữ liệu dễ dàng hơn. Tôi hy vọng điều này đã được hữu ích

Xây dựng hình thức hạnh phúc

Bạn có quan tâm đến một loạt những gì bạn có thể đạt được với HTML và API Web không?

Làm cách nào để chuyển đổi tệp JSON sang HTML?

Làm cách nào để chuyển đối tượng JSON ở dạng HTML?

Làm cách nào để lấy dữ liệu biểu mẫu HTML trong JSON?

Làm cách nào để tạo biểu mẫu động từ JSON?