How to Access data from a nested object variable

Question

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

};

So, I have created an object variable 'stock'. Containing code, name, cost and quantity of different products.

function viewAllStock(){
        let table = document.createElement("table");
        table.setAttribute("id", "viewStockTable");
        table.setAttribute("class", "table table-striped");
        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();

Later, I have created a function 'viewAllStock()' to create a table in my website(HTML). but when I run the program, I'm getting this under the "Code of the Product" cell i created ie

Code of the Product

[object Object]

[object Object]

[object Object]

[object Object]

[object Object]

So, how to get the code of each product under the heading 'Code of the Product' cell in website(HTML) using Javascript.

Answer 1

Using a for in loop over nested objects will yield stock 's keys as i . stock[i] will return the each nested object. i is the nested object key, ie Code of the Product.

td7.innerHTML = stock[i]; ==> td7.innerHTML = i;