如何循环浏览复杂对象的元素并将其显示在表格中答案

【问题标题】：How to cycle through the elements of a complex object and display it in the table如何循环浏览复杂对象的元素并将其显示在表格中
【发布时间】：2018-07-09 23:05:56
【问题描述】：

我有一个产品和商店课程。类 Product 具有属性名称、数量和价格。

class Product{
    constructor(name, count, price){
        this.name = name;
        this.count = count;
        this.price = price;
    }
}

class Shop{
    constructor(){
        this.arrProducts = [];
    }

    addProduct (Product) {
        let addName =  Product.name;
        let addPrice = Product.price;
        let addCount = Product.count;
        let newProduct = {name: addName, price: addPrice, count: addCount};

        return this.arrProducts.push(newProduct);
    };

}

我创建对象商店并添加产品

let shop = new Shop();

shop.addProduct(new Product("product1", 10, 200));
shop.addProduct(new Product("product2", 1, 500));
shop.addProduct(new Product("product3", 1, 1000));

之后我需要在表格中显示所有产品。我正在尝试这样做

let myTable= "<table><tr><td style='width: 100px; color: red;'>Product Name</td>";
myTable+= "<td style='width: 100px; color: red; text-align: right;'>Price</td>";
myTable+="<td style='width: 100px; color: red; text-align: right;'>Count</td></tr>";

myTable+="<tr><td style='width: 100px;                   '>---------------</td>";
myTable+="<td     style='width: 100px; text-align: right;'>---------------</td>";
myTable+="<td     style='width: 100px; text-align: right;'>---------------</td></tr>";

for (let item in shop) {
    myTable+="<tr><td style='width: 100px;'>" + shop[item].name + "</td>";
    myTable+="<td style='width: 100px; text-align: right;'>" + shop[item].price + "</td>";
    myTable+="<td style='width: 100px; text-align: right;'>" + shop[item].count + "</td></tr>";
}
myTable+="</table>";
document.write( myTable);

但我没有定义。

【问题讨论】：

请同时添加Shop。
我添加了Shop和方法addProduct
恕我直言，使用像ejs 或moustachejs 这样的q 服务器端模板库会容易得多。自动化模板构建过程会更好。

标签： javascript ecmascript-6

【解决方案1】：

在 Shop 中添加一个返回产品列表的方法，该类本身不可迭代。

class Shop {
    getProducts() { return this.arrProducts; };
}

...
for (let item in shop.getProducts()) {
    // use item.name
    // item.price
    // item.count
}

【讨论】：

【解决方案2】：

您可以直接使用产品数组，而无需使用新对象来获取产品信息。

我建议把单品信息分表和整表。

如果您需要为行添加一些样式，您可以将一些 CSS 类添加到行或表头。

class Product {
    constructor(name, count, price) {
        this.name = name;
        this.count = count;
        this.price = price;
    }
    getRow(cols) {
        var tr = document.createElement('tr');
        cols.forEach(key => {
            var td = document.createElement('td');
            td.classList.add(key);
            td.appendChild(document.createTextNode(this[key]));
            tr.appendChild(td);
        });
        return tr;
    }
}

class Shop {
    constructor() {
        this.products = [];
    }
    addProduct(product) {
        this.products.push(product);
    }
    getTable() {
        var table = document.createElement('table'),
            tr = document.createElement('tr');
        
        [['name', 'Product Name'], ['price', 'Price'], ['count', 'Count']].forEach(([key, text]) => {
            var th = document.createElement('th');
            th.classList.add(key);
            th.appendChild(document.createTextNode(text));
            tr.appendChild(th);
        });
        table.appendChild(tr);
        this.products.forEach(p => table.appendChild(p.getRow(['name', 'price', 'count'])));
        return table;
    }
}

let shop = new Shop();

shop.addProduct(new Product("product1", 10, 200));
shop.addProduct(new Product("product2", 1, 500));
shop.addProduct(new Product("product3", 1, 1000));

document.body.appendChild(shop.getTable());

td.name { width: 100px; }
td.count { width: 100px; text-align: right; }
td.price { width: 100px; text-align: right; }
th.name { width: 100px; color: red; }
th.count { width: 100px; color: red; text-align: right; }
th.price { width: 100px; color: red; text-align: right; }

【讨论】：