the output of Nested JSON object is undefined

let productDetails = [
    {
        id: "1",
        partNo: "10",
        productName: "bag",
        size: "30",
        color: ["Blue"],
        description: "sky bags ",
    },
    {
        id: "2",
        partNo: "15",
        productName: "bottle",
        color: ["Green", "Orange"],
        description: "plastic and still",
    },
    {
        id: "4",
        partNo: "20",
        productName: "lunchbox",
        color: ["Blue", "Red"],
        description: "fresh food",
    },
    {
        id: "3",
        partNo: "40",
        productName: "pen",
        color: ["Red", "Blue"],
        description: "gel pen ",

    }, {
        id: "5",
        partNo: "35",
        productName: "notebook",
        color: ["Blue", "Red", "Orange"],
        description: "Writing",
    }
]

/** * this function display the data in table */
function displayData() {
    objectArray = Object.values(productDetails);
    display(objectArray, clearInputData);
}
/** * this function is for get the value from form */
function getValue() {
    let id = document.getElementById('productId').value;
    let partNo = document.getElementById('productNo').value;
    let productName = document.getElementById('productName').value;
    let description = document.getElementById('description').value;
    let productWeight = document.getElementById('productWeight').value;
    let date = document.getElementById('date').value;
    let address = document.getElementById('address').value;
    let companyName = document.getElementById('companyName').value;
    return { id, partNo, productName, description, productWeight, date, address, companyName };
}

/** * function to insert data into table  */
function insertion() {
    let value = getValue();
    let firstLetter = value.productName[0];
    if (!productDetails.hasOwnProperty(firstLetter)) {
        productDetails[firstLetter] = [];
    }
    let object = {
        id: value.id,
        partNo: value.partNo,
        productName: value.productName,
        size: value.size,
        color: value.color,
        description: value.description,
        productWeight: value.productWeight,
        companyDetails: {
            date: value.date,
            address: value.address,
            companyName: value.companyName
        }
    };
    
    productDetails.push(object);
    displayData();
}

/** * Function is to display the data in table */
function display(productStore, callBack) {
    messageTable(" ");
    let data = productDetails;
    let table = "<table border = 1 cellpadding = 8 ><th colspan=5 >Product Details</th><th colspan=7 >company Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Description</th><th>weight</th><th>Date</th><th>Address</th><th>Company name</th></tr>";
    for (let i = 0; i < data.length; i++) {
        if (data[i].productWeight === undefined ){
            data[i].productWeight = " ";
        }else{}
        
        table += "<tr><td>" + data[i].id + "</td>";
        table += "<td>" + data[i].partNo + "</td>";
        table += "<td>" + data[i].productName + "</td>";
        table += "<td>" + data[i].description + "</td>";
        table += "<td>" + data[i].productWeight + "</td>";
        table += "<td>" + data[i].date + "</td>";
        table += "<td>" + data[i].address + "</td>";
        table += "<td>" + data[i].companyName + "</td>";
    }
    messageTable(table);
    clearInputData();
}

/** * function is to print the table */
function messageTable(data) {
    document.getElementById("messageTableA").innerHTML = data;
}

/** * this function is to clear the data */
function clearInputData() {
    document.getElementById("productId").value = "";
    document.getElementById("productNo").value = "";
    document.getElementById("productName").value = "";
    document.getElementById("description").value = "";
    document.getElementById("productWeight").value = "";
    document.getElementById("address").value = "";
    document.getElementById("date").value = "";
    document.getElementById("companyName").value = "";
    let radio = document.getElementsByName("size");
    for (let range = 0; range < radio.length; range++) {
        if (radio[range].checked == true) document.getElementById(radio[range].id).checked = false;
    }
    let check = document.getElementsByName("color");
    for (let range = 0; range < check.length; range++) {
        document.getElementById(check[range].id).checked = false;
    } message(" ");
} 

/** * this function is to print the message */
function message(message) {
    document.getElementById("demo").innerHTML = message;
}

<!DOCTYPE html><html>
<head> <script src="addtry.js"></script> <style> th, td, p, input { font-family: Arial, Helvetica, sans-serif; } table, th, td { border: solid 1px #DDD; border-collapse: collapse; padding: 10px 10px; text-align: center; } th { font-weight:bold; } </style></head>
<body onload="display()"> <h2>Product Details:</h2> <form action="">
 <label for="id">Id: </label>&nbsp;&nbsp; <input type="number" id="productId" required><br><br>
 <label for="no">Part No: </label>&nbsp;&nbsp; <input type="number" id="productNo" required><br><br>

 <label for="name">Name: </label>&nbsp;&nbsp; <input type="text" id="productName" required><br><br>
 
 <label for="description">Description: </label><br><br> <textarea name="description" id="description" cols="30" rows="10"></textarea><br><br>
 <label for="weight">Weight: </label>&nbsp;&nbsp; <input type="number" id="productWeight" required>&nbsp; 
 <label for="EstablishDate">Establish Date:</label>&nbsp;&nbsp; <input type="date" id="date" required><br><br>
 <label for="address">Address:</label><br><br> <textarea name="address" id="address" cols="30" rows="10"></textarea><br><br>
 <label for="CompanyName">Company Name:</label>&nbsp;&nbsp; <input type="text" id="companyName" required><br><br>


 <input type="button" value="Add" onclick="insertion()">&nbsp;
 
 <p id="result"></p> <p id="demo"></p> <p id="messageTableA"></p>
 </form></body>
</html>