Tôi đang sử dụng máy chủ Node JS, từ URL này: // localhost: 5000/listproducts Tôi có dữ liệu sau:
. ":" P2 Desc "," Số lượng ": 7}]
Tôi muốn hiển thị dữ liệu trong trang HTML bằng AJAX.
Tôi đã thử cái này trong trang HTML của mình:
$('#display').click(function() { $.ajax({ type: 'GET', url: '//localhost:5000/listproducts', dataType:"json", //to parse string into JSON object, success: function(data){ if(data){ var len = data.length; var txt = ""; if(len > 0){ for(var i=0;i<len;i++){ if(data[i].Name && data[i].Description){ txt += "<tr><td>"+data[i].Name+"</td><td>"+data[i].Description+"</td><td>"+data[i].Quantity+"</td></tr>"; } } if(txt != ""){ $("#table").append(txt).removeClass("hidden"); } } } }, error: function(jqXHR, textStatus, errorThrown){ alert('error: ' + textStatus + ': ' + errorThrown); } }); return false; });Nhưng khi tôi thử nó không có gì xảy ra và trang bảng điều khiển HTML không hiển thị bất kỳ lỗi nào:
HTML:
<button id="display">Display Products</button> <table id="table" class="hidden" style="display:none;"> <tr> <th>Product</th> <th>Price</th> <th>Description</th> <th>Image</th> </tr> </table>Tôi hy vọng đầu ra sẽ giữ dữ liệu của các sản phẩm
Bài viết này dành cho một người đang tìm kiếm một giải pháp nhanh chóng trên: 1) Cách tìm nạp dữ liệu từ API? 2) Cách chuyển đổi dữ liệu được tìm nạp từ API thành JSON? 3) Cách hiển thị dữ liệu JSON trong HTML với một hàm cuộc gọi? Bất cứ khi nào chúng tôi nghĩ đến việc hiển thị một số dữ liệu JSON vào HTML, chúng tôi có xu hướng quay đầu về phía JavaScript. Vì JavaScript có nghĩa là đối phó với nội dung HTML của tài liệu. Hơn nữa, khi chúng ta cần hiển thị một số dữ liệu trong tài liệu bằng JavaScript, chúng ta bắt đầu nghĩ về kịch bản phía máy khách liên quan đến hai yếu tố chính như: 1) DOM Phương thức2) JQuery
1) How to fetch data from an API?
2) How to convert fetched data from an API into JSON?
3) How to display JSON data in HTML with one function call?
1) DOM methods
2) jQuery
Thay vào đó, một cách tốt hơn là chuyển sang kịch bản phía máy chủ liên quan đến Node.jswhy SO? Vì Node.js đi kèm với một trình quản lý gói có tên là NP NPM. Và ở đây, việc bắt giữ để hiển thị dữ liệu JSON của bạn trong HTML với một chức năng gọi chức năng Creat-HTML (Gói).
Why so?
Because Node.js comes with a package manager called “npm”. And here’s the catch
to display your JSON data in HTML with one function call the create-html function (package).
Hãy để xem cách mà một cuộc gọi chức năng này có thể giúp tất cả sự hối hả của chúng tôi dễ dàng tạo nội dung của tệp HTML hơn.one function call can make all our hustle easier to create the content of an HTML file.
Ví dụ một ví dụ đơn giản tạo ra một tệp HTML với tiêu đề example:
A simple example that creates an HTML file with the title example:
title: 'example'
})
Ví dụ sử dụng tất cả các tùy chọn:
var html = createHTML({title: 'example',
script: 'example.js',
scriptAsync: true,
css: 'example.css',
lang: 'en',
dir: 'rtl',
head: '<meta name="description" content="example">',
body: '<p>example</p>',
favicon: 'favicon.png'
})
Bạn có thể đọc về nhiều tùy chọn có sẵn trong Creat-HTML.
Bây giờ, trước tiên hãy để Lừa xem cách tìm nạp dữ liệu từ API:
fetch('//example.com').then(response=>{
var data = response;
return data.json(); //Parsing the data into json
})
Bạn có thể đọc thêm về API tại đây: Tìm kiếm
Bước thứ hai là tìm nạp một số nội dung từ API và sau đó hiển thị nó trong bảng HTML:
.then(contents=>{console.log("Iterating through the 'result' array of objects to be displayed in table");
_.forEach(contents.result,function(value,key){
tableHtml=tableHtml+'<tr>'+
'<td>'+value.movie_names+'</td>'+
'</tr>';
})
var html = createHTML({
title: "Table - " + (new Date().toUTCString()),
scriptAsync: true,
css: '',
script: '',
lang: 'en',
dir: 'ltr',
head: '<meta charset="utf-8">'+
'<meta name="description" content="">'+
'<meta name="author" content="">'+
body: '<main role="main" class="container">'+
'<h2 class="mt-5">'+ 'JSON data in HTML'+'</h2>'+
'<table class="table table-hover">'+
'<thead>'+
//Add headers
'<th scope="col">Movie Name</th>'+
'</thead>'+
'<tbody>'+
//Add data to be displayed in the table
tableHtml +
'</tbody>'+
'</table>'+
'</main>'
})
Nếu bạn muốn biết cách chạy tập lệnh Node.js sẽ trích xuất dữ liệu và in phản hồi từ API sang báo cáo HTML (bảng), bạn có thể tham khảo kho/dự án này.