javascript - 嵌套 JSON 对象的输出未定义
问题描述
我是 JavaScript 新手
在这里,我通过表单将数据添加到表中,前 5 行是静态的,然后通过填写表单和数据将动态添加到表中
在这段代码中,我无法 insertion()
将嵌套的 json 对象添加到表中。它 display(productStore, callBack)
在 companyDetails(日期、地址和公司名称)的字段中显示未定义。我想直接在嵌套的 JSON 对象中添加这家公司的详细信息,insertion()
这样我就不会在productDetails
数组中提及它
我知道公司详细信息的前五行显示未定义,但是在添加新行后它必须显示新添加的值,但它显示未定义,这是我的问题
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>
解决方案
这是纠正
let productDetails = []
/** * 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 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);
display();
}
/** * Function is to display the data in table */
function display() {
messageTable(" ");
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>";
console.log('Having', productDetails.length, 'products');
for (let i = 0; i < productDetails.length; i++) {
const p = productDetails[i];
if (p.productWeight === undefined ){
p.productWeight = " ";
}
table += "<tr><td>" + p.id + "</td>";
table += "<td>" + p.partNo + "</td>";
table += "<td>" + p.productName + "</td>";
table += "<td>" + p.description + "</td>";
table += "<td>" + p.productWeight + "</td>";
table += "<td>" + p.companyDetails.date + "</td>";
table += "<td>" + p.companyDetails.address + "</td>";
table += "<td>" + p.companyDetails.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>
推荐阅读
- android - 将我的motog plus更新为orieo后,热点说没有互联网
- django - 夹层模板如何工作?
- python - Python json 抓取我的日期为 'DueDate': '/Date(1539205200000)/' 。我没有得到日期格式
- reactjs - 启动 create-react-app 项目期间出现未处理的错误
- eclipse - 如何在 Spring Tools 4 for Eclipse 中更改终端字体颜色
- python - Tensorflow:训练数据集中的每一行都包含之前行数据的 99%——我可以在运行训练之前对其进行优化吗?
- python - 加载 fashion_mnist 数据需要太多时间
- c++ - CMake 未检测到 GCC 包含的标头(使用 `-include`)更改
- html - 当 flex-wrap 内容超过正文高度时 CSS 额外间距
- java - 在 Eclipse 屏幕中另存为 UTF 8 错误。为什么程序没有运行?