时间戳

首页 > 解决方案 > 如何访问对象中的内容？

javascript - 如何访问对象中的内容？

问题描述

let stock = {
1001: {product: 'Chocolates', cost: 10, quantity: 10},
1002: {product: 'Biscuits', cost: 10, quantity: 10},
1003: {product: 'Bread', cost: 20, quantity: 5},
1004: {product: 'Milk', cost: 25, quantity: 5},
1005: {product: 'Curd', cost: 20, quantity: 8},
};

因此，我制作了一个包含“代码”的对象“库存”，即 1001、1002、...，而这些对象又包含包含“产品”、“成本”、“数量”的对象。

现在，我使用 JavaScript 在 HTML 中创建了一个表格

function viewAllStock(){
 let table = document.createElement("table");
 table.setAttribute("id", "viewStockTable");
 table.setAttribute("border", "1px");
 document.body.appendChild(table);

 let tr1 = document.createElement("tr");
 tr1.setAttribute("id", "myTr1");
 table.appendChild(tr1);

 let th1 = document.createElement("th");
 let tN1 = document.createTextNode("Name of the Product");
 th1.appendChild(tN1);
 tr1.appendChild(th1);

 let th2 = document.createElement("th");
 let tN2 = document.createTextNode("Cost of the Product");
 th2.appendChild(tN2);
 tr1.appendChild(th2);

 let th3 = document.createElement("th");
 let tN3 = document.createTextNode("Quantity of the Product");
 th3.appendChild(tN3);
 tr1.appendChild(th3);

 let th4 = document.createElement("th");
 let tN10 = document.createTextNode("Code of the Product");
 th4.appendChild(tN10);
 tr1.appendChild(th4);

 for (let i in stock){
     let tr2 = document.createElement("tr");
     tr2.setAttribute("id", "myTr2");
     table.appendChild(tr2);

     let td1 = document.createElement("td");
     td1.innerHTML = stock[i].product;
     tr2.appendChild(td1);

     let td2 = document.createElement("td");
     td2.innerHTML = stock[i].cost;
     tr2.appendChild(td2);

     let td3 = document.createElement("td");
     td3.innerHTML = stock[i].quantity;
     tr2.appendChild(td3);

     let td7 = document.createElement("td");
     td7.innerHTML = stock[i];
     tr2.appendChild(td7);
  }
 }viewAllStock();

确切地说，问题在于，当我尝试在表格中以 HTML 格式打印每个产品的代码时，我看到类似这样的内容... [object Object]

如何使代码出现而不是那个？

标签： javascripthtml

解决方案

您td7.innerHTML = stock[i];调用toString对象stock[i]内容的 - 方法。toString只能返回原始值 ( Number, String)。所以Object.toString()简单地返回：[object Object]. 有关解决该问题的一种方法，请参见代码片段。

如果你真的想打印代码（1001 ... 1005），你应该使用td7.innerHTML = i;.

let stock = {
  1001: {product: 'Chocolates', cost: 10, quantity: 10},
  1002: {product: 'Biscuits', cost: 10, quantity: 10},
  1003: {product: 'Bread', cost: 20, quantity: 5},
  1004: {product: 'Milk', cost: 25, quantity: 5},
  1005: {product: 'Curd', cost: 20, quantity: 8},
};
// here is what happens for your td7.innerHTML = stock[i];
document.querySelector("div").innerHTML = stock["1004"];
// here is one (of many) way(s) to solve that;
document.querySelector("p").innerHTML = JSON.stringify(stock["1004"]);

// bonus: here's a more efficient way to create the table
const nodes = {
  table: document.createElement("table"),
  row: document.createElement("tr"),
  headerCell: document.createElement("th"),
  cell: document.createElement("td"),
  text: txt => document.createTextNode(txt)
};
const firstRow = nodes.row.cloneNode();
// add table headers
const headers = Object.keys(stock["1001"]).concat("code");
headers.forEach( head => firstRow.appendChild( 
    nodes.headerCell.cloneNode()
      .appendChild(nodes.text(head))
      .parentNode ) 
);
nodes.table.appendChild(firstRow);

// add rows
Object.entries(stock)
  .forEach( ([key, value]) => {
    const row = nodes.row.cloneNode();
    headers.forEach( header => row.appendChild(
        nodes.cell.cloneNode()
          .appendChild(nodes.text(value[header] || key))
          .parentNode ) 
    );
    nodes.table.appendChild(row);
  }
);

document.body.appendChild(nodes.table);
body {
  font: 12px/15px normal verdana, arial;
}
th {
  text-align: left;
  border-bottom: 1px solid #777;
}
tr:nth-child(even) td {
  background-color: #eee;
}
<div></div>
<p></p>

推荐阅读