Hướng dẫn display json data in html using node js - hiển thị dữ liệu json trong html bằng nút js

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?
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?

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) 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:

var html = createHTML({
  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('http://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.