Hướng dẫn array of objects to html table - mảng các đối tượng vào bảng html

Ví dụ, chúng ta có một số mảng đối tượng, đây là một loạt người dùng:

let users = [ { name: 'name1', surname: 'surname1', patronymic: 'patronymic1' }, { name: 'name2', surname: 'surname2', patronymic: 'patronymic2' }, { name: 'name3', surname: 'surname3', patronymic: 'patronymic3' }, ];

Hãy tạo một bảng HTML từ mảng này, trong mỗi hàng, chúng tôi sẽ viết dữ liệu của một người dùng riêng lẻ.

Với cấu trúc lưu trữ dữ liệu này, chúng thường chạy một vòng qua mảng và tạo từng ô của bảng theo cách thủ công, như thế này:

Cách tiếp cận này mang lại sự linh hoạt lớn - bản thân chúng ta có thể điều chỉnh thứ tự dữ liệu trong các ô bảng (ví dụ, chúng ta có thể trao đổi tên đầu tiên và tên đầu tiên).

Ngoài ra, nếu muốn, chúng ta có thể treo các sự kiện trên một số ô nhất định. Ví dụ: bạn có thể đính kèm một số loại hành động trên nhấp vào ô với tên cuối cùng, v.v.

Đưa ra mảng sau với nhân viên:

let employees = [ {name: 'employee1', age: 30, salary: 400}, {name: 'employee2', age: 31, salary: 500}, {name: 'employee3', age: 32, salary: 600}, ];

Đầu ra các phần tử mảng này dưới dạng bảng HTML.

Sửa đổi nhiệm vụ trước đó để khi bạn nhấp vào bất kỳ ô nào có độ tuổi, nội dung của nó tăng thêm ____10.

Sửa đổi nhiệm vụ trước đó để khi bạn nhấp vào bất kỳ ô nào có mức lương, nội dung của nó tăng thêm

Tôi đang thu thập dữ liệu chuỗi JSON trên một nút bấm. Mỗi lần tôi nhấp vào nút Một sản phẩm khác được thêm vào mảng. Mảng là một mảng các đối tượng:

{SKU: "9372983-382L", retail_price: "11.75", list_price: "3.50", product_name: "Tennis balls"}

Làm thế nào tôi có thể lấy thông tin này và chèn nó vào một bảng? nói tôi có

JavaScript:

var prodArr=[{SKU: "9372983-382L", retail_price: "11.75", list_price: "3.50", 
product_name: "Tennis balls"}];

function buildTable(data){
    var table = document.getElementById('table');
    const arr = data;
    for(var obj of arr){
        var row = document.createElement('tr');
        for(var val of Object.values(obj)){
            var col = document.createElement('td');
            col.textContent = val;
            row.appendChild(col);
        }
        table.appendChild(row);
    }
}

buildTable(prodArr);

Tôi muốn thêm các tiêu đề cho SKU :, bán lẻ_price :, list_price: sản phẩm_name: và một hộp văn bản cho số lượng trên mỗi hàng.

Sử dụng API DOM

Đối với hiệu suất, hãy tránh thêm đánh dấu (HTML) vào trang thông qua JavaScript. Các API DOM nhanh hơn nhiều và có thể được trừu tượng hóa để tạo mã dễ đọc hơn (API DOM rất dài dòng).

Sự phức tạp nguồn

Giải pháp của bạn bị phức tạp và khó đọc. Có vẻ như bạn đã giải quyết toàn bộ vấn đề trong một bước lớn. Hơn một chục dòng mã nên được xem là nhiều hơn một vấn đề cần giải quyết.

Để giải quyết vấn đề phức tạp hoặc nhiều bước chia chúng thành các phần vai trò đơn lẻ nhỏ hơn.

• Tìm tất cả tên hàng

• Tìm tất cả các tên cột

• Tìm giá trị theo tên cột

• Tạo các thành phần DOM

• Nối một phần tử DOM

• Tạo một bảng.

Mỗi vấn đề phụ này sau đó có thể được giải quyết bằng cách xác định một hàm. Khi bạn có tất cả các chức năng, bạn có thể giải quyết vấn đề chính bằng cách kết hợp các vấn đề phụ.

Cố gắng làm cho các chức năng chung chung. Tên thuộc tính phải động để bạn chỉ cần thay đổi nhỏ khi dữ liệu thay đổi. Ví dụ hiển thị 4 bảng, để thay đổi mã của bạn để cung cấp các bảng khác nhau sẽ mất nhiều công việc hơn so với việc thêm 3 cuộc gọi vào chức năng chính.

Thí dụ

Việc viết lại phá vỡ vấn đề vào phân tích cú pháp được mô tả ở trên. Tiêu đề và tên của các thuộc tính hàng và cột được truyền đến hàm.

Bạn có thể thấy tính linh hoạt của phương pháp này vì bảng có thể dễ dàng được xoay và biến đổi bằng cách thay đổi thứ tự đối số và các thuộc tính để sử dụng cho các cột và hàng.

const notes = [{note: "n1", subject: "subject1", value: 10 }, {note: "n2", subject: "subject2", value: 15 }, {note: "n2", subject: "subject2", value: 5 }, {note: "n3", subject: "subject2", value: 20 }];

const tag    = (tagName, props = {}) => Object.assign(document.createElement(tagName), props);
const txtTag = (tagName, str, props = {}) => tag(tagName, {textContent: str, ...props});
const append = (el, ...sibs) => sibs.reduce((p, sib) => (p.appendChild(sib), p), el);

append(document.body, 
  createTable("Subjects", "note", "subject", "value", notes),
  createTable("Notes", "subject", "note", "value", notes),
  createTable("Notes", "value", "note", "value", notes),
  createTable("Values", "subject", "value", "value", notes));

function createTable(title, colKey, rowKey, valKey, data) {
  const byKey = key => [...new Set(data.map(rec => rec[key]))];
  const byRowCol = (row, col) => data.reduce((val, rec) => 
    val + (rec[rowKey] === row && rec[colKey] === col ? rec[valKey] : 0), 0);
  const rows = byKey(rowKey), cols = byKey(colKey);
  return append(tag("table"),
    append(tag("tbody"),
      append(tag("tr"),
        txtTag("th", title),
        ...cols.map(str => txtTag("th", str))
      ),
      ...rows.map(row => 
        append(tag("tr"),
          txtTag("th", row),
          ...cols.map(col => txtTag("td", byRowCol(row, col)))
        )
      )
    )
  )
}

* {font-family: arial}
table, tr, th, td {
  border-collapse: collapse;
  border: 1px solid;
  padding: 3px 10px;
  margin: 4px;
}