I am new in javaScript
Here in this I'm adding data into table through form, first 5 row is static and after that By filling a form and data will be dynamically added into the table
here in this code I have a trouble with insertion() adding a nested json object into table. it display(productStore, callBack) shows undefined in the filed of companyDetails(date, address and, company name). i want to add this company Details directly in the insertion() through nested JSON object so that i've not mention it in the productDetails array
I know that first five row of company details is shows undefined but after adding a new row it has to show the newly added value but it shows undefined and that's my problem
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> <input type="number" id="productId" required><br><br>
<label for="no">Part No: </label> <input type="number" id="productNo" required><br><br>
<label for="name">Name: </label> <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> <input type="number" id="productWeight" required>
<label for="EstablishDate">Establish Date:</label> <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> <input type="text" id="companyName" required><br><br>
<input type="button" value="Add" onclick="insertion()">
<p id="result"></p> <p id="demo"></p> <p id="messageTableA"></p>
</form></body>
</html>
companyDetails.date,companyDetails.addressandcompanyDetails.companyNamein your display