Как получить доступ к контенту в объекте? - PullRequest
Новая
       0

Как получить доступ к контенту в объекте?

0 голосов
/ 27 апреля 2020 
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, ... который, в свою очередь, содержит объекты, содержащие «продукт», «стоимость», «количество».

Теперь я создал таблицу в HTML, используя JavaScript 

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]

как заставить код появиться вместо этого?

Ответы [ 5 ]

1 голос
/ 27 апреля 2020

Изменить stock[i] на i как, 

     td7.innerHTML = i;
     tr2.appendChild(td7);

Где i сам ключ этого объекта, как вы делаете for...in .. 

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},
};

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 = i;
     tr2.appendChild(td7);
  }
 }viewAllStock();
1 голос
/ 27 апреля 2020

Ваш 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>
0 голосов
/ 27 апреля 2020

при циклическом просмотре объекта javascript переменная i представляет код продукта, поэтому вам не нужно указывать stock [i], используйте только (i) вместо этого.

так попробуйте это: 

 let td7 = document.createElement("td");
 td7.innerHTML = i;
 tr2.appendChild(td7);

Я надеюсь, что это поможет

0 голосов
/ 27 апреля 2020

Для доступа к содержимому объекта вам необходимо получить доступ к каждому свойству, в вашем случае ваши свойства равны 1001 1002 ..., я предлагаю вам использовать карту для этого https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Если вы хотите продолжить работу с объектом, вы можете сделать что-то вроде этого: 

Object.keys(stock).forEach(el=> {
//inside here you access each of the properties of the objects from list
//  for example el.product
})

или если вы также хотите эти значения 1001 и так ... 

Object.entries(stock).forEach([key,value] => {
// key is the number for example 1001
// value is the object containing product, cost etc.
})
0 голосов
/ 27 апреля 2020

Вам необходимо вернуть 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},
};

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 = i;
     tr2.appendChild(td7);
  }
 }viewAllStock();
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...