JSON có thể rất dễ dàng được dịch sang JavaScript
JavaScript có thể được sử dụng để tạo HTML trong các trang web của bạn
Bảng HTML
Tạo một bảng HTML với dữ liệu nhận được dưới dạng JSON
Thí dụ
const dbParam = JSON. xâu chuỗi [{bảng. "khách hàng", giới hạn. 20}];
const xmlhttp = new XMLHttpRequest[];
xmlhttp. tải = chức năng [] {
myObj = JSON. phân tích cú pháp [cái này. văn bản phản hồi];
hãy để văn bản = ""
cho [hãy để x trong myObj] {
văn bản += "";
}
văn bản += "
tài liệu. getElementById["bản trình diễn"]. bên trongHTML = văn bản;
}
xmlhttp. open["POST", "json_demo_html_table. php"];
xmlhttp. setRequestHeader["Kiểu nội dung", "ứng dụng/x-www-form-urlencoding"];
xmlhttp. gửi["x=" + dbParam];
Bảng HTML động
Tạo bảng HTML dựa trên giá trị của menu thả xuống
Thí dụ
Tự mình thử »
Danh sách thả xuống HTML
Tạo danh sách thả xuống HTML với dữ liệu nhận được dưới dạng JSON
Thí dụ
const dbParam = JSON. xâu chuỗi [{bảng. "khách hàng", giới hạn. 20}];
const xmlhttp = new XMLHttpRequest[];
xmlhttp. tải = chức năng [] {
const myObj = JSON. phân tích cú pháp [cái này. văn bản phản hồi];
let text = "" for [let x in myObj] { text += "";
tài liệu. getElementById["bản trình diễn"]. bên trongHTML = văn bản;
}
}
xmlhttp. open["POST", "json_demo_html_table. php", đúng];
xmlhttp. setRequestHeader["Kiểu nội dung", "ứng dụng/x-www-form-urlencoding"];
xmlhttp. gửi["x=" + dbParam];
Như nhiều người đã đề cập trước đây, điều này không hoạt động khi sử dụng lệnh gọi AJAX. Tuy nhiên, có một cách xung quanh nó. Sử dụng phần tử đầu vào, bạn có thể chọn tệp của mình
Tệp được chọn [. json] cần phải có cấu trúc này
[
{"key": "value"},
{"key2": "value2"},
...
{"keyn": "valuen"},
]
Sau đó, bạn có thể đọc tệp bằng JS với FileReader[]
document.getElementById["get_the_file"].addEventListener["change", function[] {
var file_to_read = document.getElementById["get_the_file"].files[0];
var fileread = new FileReader[];
fileread.onload = function[e] {
var content = e.target.result;
// console.log[content];
var intern = JSON.parse[content]; // Array of Objects.
console.log[intern]; // You can index every object
};
fileread.readAsText[file_to_read];
}];
Bây giờ trong tệp javascript, chúng tôi sẽ sử dụng phương thức tìm nạp để tìm nạp các sản phẩm từ tệp JSON. Khi chúng tôi có các sản phẩm, chúng tôi sẽ hiển thị từng sản phẩm trong mẫu hàng của bảng
fetch["products.json"]
.then[function[response]{
return response.json[];
}]
.then[function[products]{
let placeholder = document.querySelector["#data-output"];
let out = "";
for[let product of products]{
out += `
${product.name}
${product.price}
${product.inventory}
${product.productCode}
`;
}
placeholder.innerHTML = out;
}];
phân tích mã
Hãy phân tích từng dòng mã javascript
- Trong dòng 1, chúng tôi sử dụng phương thức tìm nạp [] để lấy dữ liệu từ các sản phẩm. tập tin json.
fetch["products.json"] - Phương thức fetch[] trả về một đối tượng Promise. Vì vậy, trong dòng 2, chúng tôi sử dụng. then[] để bắt đối tượng Phản hồi và phân giải nó thành đối tượng javascript bằng. phương thức json[], ở dòng 3.
.then[function[response]{ return response.json[]; }] - Các. json[] cũng trả về một lời hứa, vì vậy chúng ta phải sử dụng một phương thức khác. then[] để thu thập dữ liệu của chúng tôi [trong trường hợp của chúng tôi là các sản phẩm]. Đó là những gì chúng tôi làm trong dòng 5
Đối số sản phẩm bên trong hàm đang giữ một mảng sản phẩm javascript..then[function[products]{ - Trong dòng 6, chúng tôi đang nhắm mục tiêu phần thân bảng trong tệp html và chúng tôi lưu trữ nó trong biến trình giữ chỗ.
let placeholder = document.querySelector["#data-output"]; - Trong dòng 7, chúng tôi khởi tạo một biến có tên out và chúng tôi đang đặt giá trị của nó thành một chuỗi rỗng, vì vậy chúng tôi có thể sử dụng biến out sau này trong tập lệnh. ________số 8_______
- Tiếp theo, chúng ta sẽ lặp qua mảng sản phẩm ở dòng 8 để có thể truy cập mọi sản phẩm.
for[let product of products]{ - Bên trong vòng lặp for, chúng tôi sử dụng biến out để nối thêm một mẫu hàng của bảng chứa các giá trị sản phẩm. Chúng tôi đang sử dụng một mẫu chữ [dấu tick phía sau ``] để viết mã html.
out += ` ${product.name} ${product.price} ${product.inventory} ${product.productCode} `; } - Chúng ta có thể chèn mã html, biến javascript bằng cấu trúc này ${product. hình ảnh}
- Và điều cuối cùng chúng ta phải làm là nhắm mục tiêu phần tử tbody và thêm dữ liệu mà biến out nắm giữ.
0Image Product name Price inventory Product code
Kết quả
Chạy đoạn mã trên trên trình duyệt bạn sẽ nhận được kết quả như sau. Bạn cũng phải tải xuống css để có cùng kiểu chính xác. Nhấp vào nút "Nhận mã nguồn"