Hướng dẫn nodejs json to html table - nodejs json sang bảng html

Đưa ra một json. Làm thế nào bạn sẽ chuyển đổi nó thành một bảng HTML?

Tôi đã nhìn lên và thấy rằng Node-JSON2HTML cho phép tôi, tuy nhiên, có tài liệu chính xác xung quanh cách tạo bảng HTML bằng cách này.

Vì vậy - nói rằng, nếu đây là json của tôi

[
  {
    "App Name": "Yahoo",
    "Accessibility": 94,
    "Best Practices": 93,
    "SEO": 90,
    "Performance": 54
  },
  {
    "App Name": "Google",
    "Accessibility": 89,
    "Best Practices": 86,
    "SEO": 80,
    "Performance": 41
  },
  {
    "App Name": "Guardian UK"…

Có thể hơi quá muộn, nhưng những giải pháp tôi tìm thấy không hoạt động khá tốt. Tôi cần một cái gì đó đơn giản hơn, không phải là một công cụ mẫu hoặc một lib. Ngoài ra, gói NPM được đề cập, HTML-Tableify, đã không làm việc cho tôi khi cố gắng tạo bảng từ phản hồi Mongoose. BTW, xin lỗi vì tiếng Anh kém của tôi.

const row = html => `\n${html}\n`,
      heading = object => row[Object.keys[object].reduce[[html, heading] => [html + `${heading}`], '']],
      datarow = object => row[Object.values[object].reduce[[html, value] => [html + `${value}`], '']];
                               
function htmlTable[dataList] {
  return `
            ${heading[dataList[0]]}
            ${dataList.reduce[[html, object] => [html + datarow[object]], '']}
          `
}

const set = [
  {_id: 1234,
    usuario: 'user1',
    clave: 'pass1' },
  {_id: 12345,
    usuario: 'user2',
    clave: 'asdas' },
  {_id: 12357,
    usuario: 'user3',
    clave: 'asdasd' },
  {_id: 12376,
    usuario: 'user5',
    clave: 'asdasd' }
];

htmlTable[set]

Output:

    _id
    usuario
    clave
  

  
   
  

     
123
     
xD
     
asd
  
  

     
123
     
xD
     
asd
  
  

     
123
     
xD
     
asd
  
  

     
123
     
xD
     
asd
  

Làm thế nào nó hoạt động ... nó thực sự khá đơn giản. Hàm row kết thúc một số giá trị bên trong một thẻ.

const row = html => `\n${html}\n`,
      heading = object => row[Object.keys[object].reduce[[html, heading] => [html + `${heading}`], '']],
      datarow = object => row[Object.values[object].reduce[[html, value] => [html + `${value}`], '']];
                               
function htmlTable[dataList] {
  return `
            ${heading[dataList[0]]}
            ${dataList.reduce[[html, object] => [html + datarow[object]], '']}
          `
}

const set = [
  {_id: 1234,
    usuario: 'user1',
    clave: 'pass1' },
  {_id: 12345,
    usuario: 'user2',
    clave: 'asdas' },
  {_id: 12357,
    usuario: 'user3',
    clave: 'asdasd' },
  {_id: 12376,
    usuario: 'user5',
    clave: 'asdasd' }
];

htmlTable[set]

const row = html => `\n${html}\n`,
      heading = object => row[Object.keys[object].reduce[[html, heading] => [html + `${heading}`], '']],
      datarow = object => row[Object.values[object].reduce[[html, value] => [html + `${value}`], '']];
                               
function htmlTable[dataList] {
  return `
            ${heading[dataList[0]]}
            ${dataList.reduce[[html, object] => [html + datarow[object]], '']}
          `
}

const set = [
  {_id: 1234,
    usuario: 'user1',
    clave: 'pass1' },
  {_id: 12345,
    usuario: 'user2',
    clave: 'asdas' },
  {_id: 12357,
    usuario: 'user3',
    clave: 'asdasd' },
  {_id: 12376,
    usuario: 'user5',
    clave: 'asdasd' }
];

htmlTable[set]

const row = html => `\n${html}\n`,
      heading = object => row[Object.keys[object].reduce[[html, heading] => [html + `${heading}`], '']],
      datarow = object => row[Object.values[object].reduce[[html, value] => [html + `${value}`], '']];
                               
function htmlTable[dataList] {
  return `
            ${heading[dataList[0]]}
            ${dataList.reduce[[html, object] => [html + datarow[object]], '']}
          `
}

const set = [
  {_id: 1234,
    usuario: 'user1',
    clave: 'pass1' },
  {_id: 12345,
    usuario: 'user2',
    clave: 'asdas' },
  {_id: 12357,
    usuario: 'user3',
    clave: 'asdasd' },
  {_id: 12376,
    usuario: 'user5',
    clave: 'asdasd' }
];

htmlTable[set]

Với một vài điều chỉnh, định dạng đánh dấu, thuộc tính và kiểu dáng có thể dễ dàng được thêm vào.

Kết xuất HTML từ JSON và các đối tượng JavaScript cứng hơn về mặt cú pháp

đã xuất bản 1.0.10 4 năm trước

Chuyển đổi báo cáo dưa chuột từ JSON sang HTML bằng cách sử dụng các mẫu ria mép

• quả dưa chuột
• json2html
• báo cáo

Xuất bản 0.4,4 6 năm trước

Biên dịch tệp JSON nội tuyến vào HTML tĩnh từ mẫu

• Gruntplugin

đã xuất bản 0,1.1 9 năm trước

Vue 小倍 插件 更新

đã xuất bản 0,0,6 5 tháng trước

Chuyển đổi báo cáo dưa chuột từ JSON sang HTML bằng cách sử dụng các mẫu ria mép - không có sự phụ thuộc unicode

• quả dưa chuột
• json2html
• báo cáo

Xuất bản 0.4,4 6 năm trước

Biên dịch tệp JSON nội tuyến vào HTML tĩnh từ mẫu

Gruntplugin

đã xuất bản 0,1.1 9 năm trước

Vue 小倍 插件 更新

đã xuất bản 0,0,6 5 tháng trước

• json2html

Chuyển đổi báo cáo dưa chuột từ JSON sang HTML bằng cách sử dụng các mẫu ria mép - không có sự phụ thuộc unicode

Ký hiệu đối tượng JSON hoặc JavaScript là một định dạng dữ liệu dễ hiểu đơn giản. JSON là nhẹ và ngôn ngữ độc lập. Ở đây, trong bài viết này, tôi sẽ chỉ cho bạn cách chuyển đổi dữ liệu JSON thành bảng HTML bằng JavaScript. Ngoài ra, bạn sẽ tìm hiểu làm thế nào bạn có thể tạo một bảng trong JavaScript một cách linh hoạt bằng phương thức createdEuity [].

Xem bản demo này

Lưu ý: Bạn cũng có thể sử dụng jQuery để chuyển đổi dữ liệu từ tệp JSON sang bảng HTML: You can also use jQuery to convert data from a JSON file to an HTML table

Cấu trúc JSON

JSON cho ví dụ này trông như thế này.

[
    {
        "Book ID": "1",
        "Book Name": "Computer Architecture",
        "Category": "Computers",
        "Price": "125.60"
    },
    {
        "Book ID": "2",
        "Book Name": "Asp.Net 4 Blue Book",
        "Category": "Programming",
        "Price": "56.00"
    },
    {
        "Book ID": "3",
        "Book Name": "Popular Science",
        "Category": "Science",
        "Price": "210.40"
    }
]

JSON trên có một mảng gồm ba cuốn sách khác nhau với ID, tên, danh mục và giá cả. Chỉ cần ba hồ sơ cho ví dụ. Bạn có thể thêm nhiều hơn.three different Books with ID, Name, Category and Price. Just three records for the example. You can add more.

Tôi muốn chương trình đọc dữ liệu JSON, lấy các cột [ID sách, tên sách, v.v.] cho tiêu đề và các giá trị cho các tiêu đề tương ứng.

Đánh dấu và kịch bản

Trong phần đánh dấu, tôi có một nút để gọi hàm JavaScript, sẽ trích xuất dữ liệu JSON từ mảng, tạo một tiêu đề và hàng động và cuối cùng là dữ liệu trong đó. Tôi cũng có phần tử Div sẽ phục vụ như một thùng chứa cho bảng của chúng tôi. Sau khi tôi điền dữ liệu, tôi sẽ nối vào.append the

    
        table, th, td 
        {
            border: solid 1px #ddd;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th { 
            font-weight:bold;
        }
    


    
    

  





  let tableFromJson = [] => {
    
    const myBooks = [
      {'Book ID': '1', 'Book Name': 'Challenging Times',
       'Category': 'Business', 'Price': '125.60'
      },
      {'Book ID': '2', 'Book Name': 'Learn JavaScript',
       'Category': 'Programming', 'Price': '56.00'
      },
      {'Book ID': '3', 'Book Name': 'Popular Science',
       'Category': 'Science', 'Price': '210.40'
      }
    ]

    
    let col = [];
    for [let i = 0; i < myBooks.length; i++] {
      for [let key in myBooks[i]] {
        if [col.indexOf[key] === -1] {
          col.push[key];
        }
      }
    }

    
    const table = document.createElement["table"];

    
    let tr = table.insertRow[-1];                   

    for [let i = 0; i < col.length; i++] {
      let th = document.createElement["th"];      
      th.innerHTML = col[i];
      tr.appendChild[th];
    }

    
    for [let i = 0; i < myBooks.length; i++] {

      tr = table.insertRow[-1];

      for [let j = 0; j < col.length; j++] {
        let tabCell = tr.insertCell[-1];
        tabCell.innerHTML = myBooks[i][col[j]];
      }
    }

    
    const divShowData = document.getElementById['showData'];
    divShowData.innerHTML = "";
    divShowData.appendChild[table];
  }

for [let i = 0; i < myBooks.length; i++] {
    for [let key in myBooks[i]] {
        col.push[key];
        console.log [key];
    }
}

const table = document.createElement["table"];
let tr = table.insertRow[-1];       

for [let i = 0; i < col.length; i++] {
    let th = document.createElement["th"];      
    th.innerHTML = col[i];
    tr.appendChild[th];
}

tabCell.innerHTML = myBooks[i][col[j]];