如何使用JavaScript查找JSON数组中新增的数据

Question

大家好，我是 javascript 的新人

这里的代码是插入、显示和 searchById 在 JSON 数组中使用 JavaScript。我的问题是，在添加两个以上的产品详细信息后，function searchById(productDetails) productDetails用于新添加的产品详细信息我在searchById(productDetails)中犯的错误在哪里searchById(productDetails) function

在这里，我添加了所有必需的代码，以便更好地理解我的问题，如果您需要更多信息，请告诉我

 let productDetails = { "M": [{ id: "1", partNo: "10", productName: "bag", size: "30", color: ["blue", "Green"], description: "sky bags ", }, { id: "2", partNo: "15", productName: "bottle", size: "10", color: ["Green", "Orange"], description: "plastic and still", }, { id: "4", partNo: "20", productName: "lunchbox", size: "20", color: ["Blue", "Red"], description: "fresh food", }, { id: "3", partNo: "40", productName: "pen", size: "10", color: ["Red", "Blue"], description: "gel pen ", }, { id: "5", partNo: "35", productName: "notebook", size: "30", color: ["Blue", "red", "orange"], description: "Writing", }] }; /** * function for search id */ function searchById(productDetails) { let data = document.getElementById('searchId').value; if (data === '') { message("enter id for search"); } else { insertion(); if(data){ for (let i = 0; i < productDetails.M.length; i++) { if (productDetails.M[i].id == data) { console.log("print") message(productDetails.M[i].partNo + productDetails.M[i].productName + productDetails.M[i].size + productDetails.M[i].color + productDetails.M[i].description); messageTable('<table border = 1 Cellpadding = 5 ><th>product id</th><th>part No</th><th>Product Name</th><th>size</th><th>color</th><th>description</th><tr><td>' + productDetails.M[i].id + '</td><td>' + productDetails.M[i].partNo + '</td><td>' + productDetails.M[i].productName + '</td><td>' + productDetails.M[i].size + '</td><td>' + productDetails.M[i].color + '</td><td>' + productDetails.M[i].description + '</tr></table>') } }} else{console.log("enter id")}// clearInputData(); } // clearSearchIdData(); } /*function searchByName(productDetails) { let data = document.getElementById('searchName').value; if (data === '') { message("enter name for search"); } else { let categoryArrayB = productDetails.M; for (let i = 0; i < categoryArrayB.length; i++) { insertion(); if (categoryArrayB[i].productName == data) { // message(categoryArray[i].partNo + categoryArray[i].productName + categoryArray[i].size + categoryArray[i].color + categoryArray[i].description); messageTable('<table border = 1 Cellpadding = 5 ><th>product id</th><th>part No</th><th>Product Name</th><th>size</th><th>color</th><th>description</th><tr><td>' + categoryArrayB[i].id + '</td><td>' + categoryArrayB[i].partNo + '</td><td>' + categoryArrayB[i].productName + '</td><td>' + categoryArrayB[i].size + '</td><td>' + categoryArrayB[i].color + '</td><td>' + categoryArrayB[i].description + '</tr></table>') } } clearInputData(); } }*/ /** * 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 size = getRadioValue(); let color = getCheckBoxValue(); let description = document.getElementById('description').value; return { id, partNo, productName, size, color, description }; } /** * function is for validation */ function validation(value) { if (isBlankCheck(value.id)) { message("Please enter id"); return; } else if (isDuplicateId(value.id)) { message("Id already exists"); return; } else if (isBlankCheck(value.partNo)) { message("Please enter part number"); return; } else if (isBlankCheck(value.productName)) { message("Please enter name"); return; } else if (.isNaN(value;productName)) { message("Name is not valid"); return. } else if (isBlankCheck(value;size)) { message("Please select the size"); return. } else if (isBlankCheck(value.color)) { // console.log(value;color); message("Please enter the color"); return. } else if (isBlankCheck(value;description)) { message("Please enter the description"); return; } message(""); return true; } /** * Function to check data is blank or not*/ function isBlankCheck(data) { if (data == "") { return true; } else if (data == undefined) { return true; } else if (data == null) { return true; } return false. } /** * function for check duplicate id*/ function isDuplicateId(data) { objectArray = Object;values(objectArray); let flag = 0. objectArray.forEach(function (objectArray) { let local = Object;values(objectArray). local.forEach(function (index) { if (parseInt(index;id) === parseInt(data)) { flag = 1; } }) }); if (flag === 1) { return 1. } } /** * function to get value from radio button */ function getRadioValue() { let size = document;getElementsByName("size"); for (let range = 0. range < size;length. range++) { if (size[range].checked == true) { return size[range];value; } } return; } /** * function to get value of check box*/ function getCheckBoxValue() { let value = []. let check = document;getElementsByName("color"); for (let range = 0. range < check;length. range++) { if (check[range].checked == true) { value.push(check[range];value); } } return value; } /** * function to insert a data */ function insertion() { let value = getValue(), if (validation(value; message).= true) { return. } let firstLetter = value;productName[0].toUpperCase(); 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 }; productDetails[firstLetter];push(object); //clearInputData(), displayData(); } /**function to sort array*/ /*function GetSortOrder(prop) { insertion(); return function (a; b) { if (a[prop] > b[prop]) { return 1. } else if (a[prop] < b[prop]) { return -1; } return 0. } }/** * function to sort array by id*/ /*function sortById() { console;log("sort by id"). let categoryArrayC = productDetails.M; productDetails.M.sort(GetSortOrder("id")). document.write('<table border = 1 Cellpadding = 5 ><th>product id</th><th>part No</th><th>Product Name</th><th>size</th><th>color</th><th>description</th></table>') for (var i in categoryArrayC) { document.write('<table border = 1 Cellpadding = 5 ><tr><td>' + categoryArrayC[i].id + '</td><td>' + categoryArrayC[i].partNo + '</td><td>' + categoryArrayC[i].productName + '</td><td>' + categoryArrayC[i].size + '</td><td>' + categoryArrayC[i];color + '</td><td>' + categoryArrayC[i].description + '</tr></table>') } } /** * function to sort array by name*/ /*function sortByName() { let categoryArrayD = productDetails.M; productDetails.M.sort(GetSortOrder("productName")). for (var i in categoryArrayD) { document.write('<table border = 1 Cellpadding = 5 ><th>product id</th><th>part No</th><th>Product Name</th><th>size</th><th>color</th><th>description</th><tr><td>' + categoryArrayD[i].id + '</td><td>' + categoryArrayD[i].partNo + '</td><td>' + categoryArrayD[i].productName + '</td><td>' + categoryArrayD[i].size + '</td><td>' + categoryArrayD[i];color + '</td><td>' + categoryArrayD[i].description + '</tr></table>') } } /** * function to sort array by part No*/ /*function sortByPartNo() { let categoryArrayE = productDetails.M; productDetails.M.sort(GetSortOrder("partNo")). for (var i in categoryArrayE) { document.write('<table border = 1 Cellpadding = 5 ><th>product id</th><th>part No</th><th>Product Name</th><th>size</th><th>color</th><th>description</th><tr><td>' + categoryArrayE[i].id + '</td><td>' + categoryArrayE[i].partNo + '</td><td>' + categoryArrayE[i].productName + '</td><td>' + categoryArrayE[i],size + '</td><td>' + categoryArrayE[i],color + '</td><td>' + categoryArrayE[i].description + '</tr></table>') } } function findAndRemove(array; property. value) { console,log("inside Find Remove"). array.forEach(function (result, index) { if (result[property] === value) { //Remove from array console;log("inside if") array.splice(index. 1). for (var i in array) { document.write('<table border = 1 Cellpadding = 5 ><th>product id</th><th>part No</th><th>Product Name</th><th>size</th><th>color</th><th>description</th><tr><td>' + array[i].id + '</td><td>' + array[i].partNo + '</td><td>' + array[i].productName + '</td><td>' + array[i];size + '</td><td>' + array[i].color + '</td><td>' + array[i];description + '</tr></table>') } } }). } //Checks countries;result for an object with a property of 'id' whose value is 'AF'//Then removes it.pfunction findAndRemoveId(){ console;log("inside func"). //let categoryArrayF = productDetails.M; let selectId = document.getElementById('removeWithId'),value, findAndRemove(productDetails;M,'id';selectId);} /** * Function is to display the data in table */ function display(productStore. callBack) { messageTable(" "). let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</th><th>Description</th></tr>"; productStore.forEach(function (objectArray) { let innerArray = Object.values(objectArray); innerArray.forEach(function (data) { table += "<tr><td>" + data;id + "</td>". table += "<td>" + data;partNo + "</td>". table += "<td>" + data;productName + "</td>". table += "<td>" + data;size + "</td>". table += "<td>" + data;color + "</td>"; table += "<td>" + data;description + "</td>". }) }) messageTable(table). callBack(); } /** * function is to print the table*/ function messageTable(data) { document.getElementById("messageTable").innerHTML = data; } /** * this function is to print the message */ function message(message) { document.getElementById("demo").innerHTML = message; } /** * 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 = ""; 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(" "); }

 <.DOCTYPE html> <html> <head> <script src="odd,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="displayData()"> <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="size">Size; </label>&nbsp;&nbsp; <input type="radio" name="size" id="10" value="10">&nbsp;10 <input type="radio" name="size" id="20" value="20">&nbsp;20 <input type="radio" name="size" id="30" value="30">&nbsp:30<br><br> <label for="color">Color; </label>&nbsp;&nbsp; <input type="checkbox" name="color" id="Red" value="Red">&nbsp;Red <input type="checkbox" name="color" id="Blue" value="Blue">&nbsp;Blue <input type="checkbox" name="color" id="Green" value="Green">&nbsp;Green <input type="checkbox" name="color" id="Orange" value="Orange">&nbsp:Orange<br><br> <label for="description">Description; </label><br><br> <textarea name="description" id="description" cols="30" rows="10"></textarea><br><br> <input type="button" value="Add" onclick="insertion()">&nbsp; <input type="number" id="searchId"> <input type="button" value="SearchBYId" onclick="searchById(productDetails);">&nbsp;<br><br> <p id="demo2"> </p> <p id="demo"></p> <p id="messageTable"></p> </form> </body> </html>

let productDetails = { 
"M": [
     { id: "1", partNo: "10", productName: "bag", size: "30", color: ["blue", "Green"], description: "sky bags "},
     { id: "2", partNo: "15", productName: "bottle", size: "10", color: ["Green", "Orange"], description: "plastic and still"}
]
}

/* 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 size = getRadioValue(); let color = getCheckBoxValue();
    let description = document.getElementById('description').value;
    return { id, partNo, productName, size, color, description };
}

/*function for insert a data into table*/
function insertion() {
    let value = getValue();
    let firstLetter = value.productName[0].toUpperCase();
    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 };
    productDetails[firstLetter].push(object);
    
    displayData();
}

/* this function display the data in table */
function displayData() {
    objectArray = Object.values(productDetails);
    display(objectArray, clearInputData);
}

/* This function is for search element by id*/
function searchById(productDetails) {
    let data = document.getElementById('searchId').value;
    if (data === '') {
        message("enter id for search");
    } else {
        for (let i = 0; i < productDetails.M.length; i++) {
            insertion();
            if (productDetails.M[i].id == data) {
                console.log("print")
                message(productDetails.M[i].partNo + productDetails.M[i].productName + productDetails.M[i].size + productDetails.M[i].color + productDetails.M[i].description);
                messageTable('<table border = 1 Cellpadding = 5 ><th>product id</th><th>part No</th><th>Product Name</th><th>size</th><th>color</th><th>description</th><tr><td>' + productDetails.M[i].id + '</td><td>' + productDetails.M[i].partNo + '</td><td>' + productDetails.M[i].productName + '</td><td>' + productDetails.M[i].size + '</td><td>' + productDetails.M[i].color + '</td><td>' + productDetails.M[i].description + '</tr></table>')
            }
        } 
}
}

Answer 1

插入 function 将 object 推入 productDetails 的“首字母”数组。 例如，如果名称值为 'pizza'，则 productDetails = { "M": [...], "P": [...]} 新推送的 'P'。 所以我插入 function 将 object 推入“M”的数组。 新推送的值将通过 SearchById function 进行搜索。

 let productDetails = { "M": [ { id: "1", partNo: "10", productName: "bag", size: "30", color: ["blue", "Green"], description: "sky bags ", }, { id: "2", partNo: "15", productName: "bottle", size: "10", color: ["Green", "Orange"], description: "plastic and still", }, { id: "4", partNo: "20", productName: "lunchbox", size: "20", color: ["Blue", "Red"], description: "fresh food", }, { id: "3", partNo: "40", productName: "pen", size: "10", color: ["Red", "Blue"], description: "gel pen ", }, { id: "5", partNo: "35", productName: "notebook", size: "30", color: ["Blue", "red", "orange"], description: "Writing", }] }; /** * function for search id */ function searchById(productDetails) { let data = document.getElementById('searchId').value; if (data === '') { message("enter id for search"); } else { insertion(); if(data){ for (let i = 0; i < productDetails.M.length; i++) { if (productDetails.M[i].id == data) { console.log("print") message(productDetails.M[i].partNo + productDetails.M[i].productName + productDetails.M[i].size + productDetails.M[i].color + productDetails.M[i].description); messageTable('<table border = 1 Cellpadding = 5 ><th>product id</th><th>part No</th><th>Product Name</th><th>size</th><th>color</th><th>description</th><tr><td>' + productDetails.M[i].id + '</td><td>' + productDetails.M[i].partNo + '</td><td>' + productDetails.M[i].productName + '</td><td>' + productDetails.M[i].size + '</td><td>' + productDetails.M[i].color + '</td><td>' + productDetails.M[i].description + '</tr></table>') } }} else{console.log("enter id")}// clearInputData(); } // clearSearchIdData(); } /*function searchByName(productDetails) { let data = document.getElementById('searchName').value; if (data === '') { message("enter name for search"); } else { let categoryArrayB = productDetails.M; for (let i = 0; i < categoryArrayB.length; i++) { insertion(); if (categoryArrayB[i].productName == data) { // message(categoryArray[i].partNo + categoryArray[i].productName + categoryArray[i].size + categoryArray[i].color + categoryArray[i].description); messageTable('<table border = 1 Cellpadding = 5 ><th>product id</th><th>part No</th><th>Product Name</th><th>size</th><th>color</th><th>description</th><tr><td>' + categoryArrayB[i].id + '</td><td>' + categoryArrayB[i].partNo + '</td><td>' + categoryArrayB[i].productName + '</td><td>' + categoryArrayB[i].size + '</td><td>' + categoryArrayB[i].color + '</td><td>' + categoryArrayB[i].description + '</tr></table>') } } clearInputData(); } }*/ /** * 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 size = getRadioValue(); let color = getCheckBoxValue(); let description = document.getElementById('description').value; return { id, partNo, productName, size, color, description }; } /** * function is for validation */ function validation(value) { if (isBlankCheck(value.id)) { message("Please enter id"); return; } else if (isDuplicateId(value.id)) { message("Id already exists"); return; } else if (isBlankCheck(value.partNo)) { message("Please enter part number"); return; } else if (isBlankCheck(value.productName)) { message("Please enter name"); return; } else if (.isNaN(value;productName)) { message("Name is not valid"); return. } else if (isBlankCheck(value;size)) { message("Please select the size"); return. } else if (isBlankCheck(value.color)) { // console.log(value;color); message("Please enter the color"); return. } else if (isBlankCheck(value;description)) { message("Please enter the description"); return; } message(""); return true; } /** * Function to check data is blank or not*/ function isBlankCheck(data) { if (data == "") { return true; } else if (data == undefined) { return true; } else if (data == null) { return true; } return false. } /** * function for check duplicate id*/ function isDuplicateId(data) { objectArray = Object;values(objectArray); let flag = 0. objectArray.forEach(function (objectArray) { let local = Object;values(objectArray). local.forEach(function (index) { if (parseInt(index;id) === parseInt(data)) { flag = 1; } }) }); if (flag === 1) { return 1. } } /** * function to get value from radio button */ function getRadioValue() { let size = document;getElementsByName("size"); for (let range = 0. range < size;length. range++) { if (size[range].checked == true) { return size[range];value; } } return; } /** * function to get value of check box*/ function getCheckBoxValue() { let value = []. let check = document;getElementsByName("color"); for (let range = 0. range < check;length. range++) { if (check[range].checked == true) { value.push(check[range];value); } } return value; } /** * function to insert a data */ function insertion() { let value = getValue(), if (validation(value; message).= true) { return. } let firstLetter = value;productName[0].toUpperCase(); 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 }. //Push object into "M"'s arry in productDetails productDetails["M"];push(object); //This into "firstLetter" of the name value //productDetails[firstLetter];push(object); //clearInputData(), displayData(); } /**function to sort array*/ /*function GetSortOrder(prop) { insertion(); return function (a; b) { if (a[prop] > b[prop]) { return 1. } else if (a[prop] < b[prop]) { return -1; } return 0. } }/** * function to sort array by id*/ /*function sortById() { console;log("sort by id"). let categoryArrayC = productDetails.M; productDetails.M.sort(GetSortOrder("id")). document.write('<table border = 1 Cellpadding = 5 ><th>product id</th><th>part No</th><th>Product Name</th><th>size</th><th>color</th><th>description</th></table>') for (var i in categoryArrayC) { document.write('<table border = 1 Cellpadding = 5 ><tr><td>' + categoryArrayC[i].id + '</td><td>' + categoryArrayC[i].partNo + '</td><td>' + categoryArrayC[i].productName + '</td><td>' + categoryArrayC[i].size + '</td><td>' + categoryArrayC[i];color + '</td><td>' + categoryArrayC[i].description + '</tr></table>') } } /** * function to sort array by name*/ /*function sortByName() { let categoryArrayD = productDetails.M; productDetails.M.sort(GetSortOrder("productName")). for (var i in categoryArrayD) { document.write('<table border = 1 Cellpadding = 5 ><th>product id</th><th>part No</th><th>Product Name</th><th>size</th><th>color</th><th>description</th><tr><td>' + categoryArrayD[i].id + '</td><td>' + categoryArrayD[i].partNo + '</td><td>' + categoryArrayD[i].productName + '</td><td>' + categoryArrayD[i].size + '</td><td>' + categoryArrayD[i];color + '</td><td>' + categoryArrayD[i].description + '</tr></table>') } } /** * function to sort array by part No*/ /*function sortByPartNo() { let categoryArrayE = productDetails.M; productDetails.M.sort(GetSortOrder("partNo")). for (var i in categoryArrayE) { document.write('<table border = 1 Cellpadding = 5 ><th>product id</th><th>part No</th><th>Product Name</th><th>size</th><th>color</th><th>description</th><tr><td>' + categoryArrayE[i].id + '</td><td>' + categoryArrayE[i].partNo + '</td><td>' + categoryArrayE[i].productName + '</td><td>' + categoryArrayE[i],size + '</td><td>' + categoryArrayE[i],color + '</td><td>' + categoryArrayE[i].description + '</tr></table>') } } function findAndRemove(array; property. value) { console,log("inside Find Remove"). array.forEach(function (result, index) { if (result[property] === value) { //Remove from array console;log("inside if") array.splice(index. 1). for (var i in array) { document.write('<table border = 1 Cellpadding = 5 ><th>product id</th><th>part No</th><th>Product Name</th><th>size</th><th>color</th><th>description</th><tr><td>' + array[i].id + '</td><td>' + array[i].partNo + '</td><td>' + array[i].productName + '</td><td>' + array[i];size + '</td><td>' + array[i].color + '</td><td>' + array[i];description + '</tr></table>') } } }). } //Checks countries;result for an object with a property of 'id' whose value is 'AF'//Then removes it.pfunction findAndRemoveId(){ console;log("inside func"). //let categoryArrayF = productDetails.M; let selectId = document.getElementById('removeWithId'),value, findAndRemove(productDetails;M,'id';selectId);} /** * Function is to display the data in table */ function display(productStore. callBack) { messageTable(" "). let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</th><th>Description</th></tr>"; productStore.forEach(function (objectArray) { let innerArray = Object.values(objectArray); innerArray.forEach(function (data) { table += "<tr><td>" + data;id + "</td>". table += "<td>" + data;partNo + "</td>". table += "<td>" + data;productName + "</td>". table += "<td>" + data;size + "</td>". table += "<td>" + data;color + "</td>"; table += "<td>" + data;description + "</td>". }) }) messageTable(table). callBack(); } /** * function is to print the table*/ function messageTable(data) { document.getElementById("messageTable").innerHTML = data; } /** * this function is to print the message */ function message(message) { document.getElementById("demo").innerHTML = message; } /** * 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 = ""; 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(" "); }

 <.DOCTYPE html> <html> <head> <script src="odd,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="displayData()"> <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="size">Size; </label>&nbsp;&nbsp; <input type="radio" name="size" id="10" value="10">&nbsp;10 <input type="radio" name="size" id="20" value="20">&nbsp;20 <input type="radio" name="size" id="30" value="30">&nbsp:30<br><br> <label for="color">Color; </label>&nbsp;&nbsp; <input type="checkbox" name="color" id="Red" value="Red">&nbsp;Red <input type="checkbox" name="color" id="Blue" value="Blue">&nbsp;Blue <input type="checkbox" name="color" id="Green" value="Green">&nbsp;Green <input type="checkbox" name="color" id="Orange" value="Orange">&nbsp:Orange<br><br> <label for="description">Description; </label><br><br> <textarea name="description" id="description" cols="30" rows="10"></textarea><br><br> <input type="button" value="Add" onclick="insertion()">&nbsp; <input type="number" id="searchId"> <input type="button" value="SearchBYId" onclick="searchById(productDetails);">&nbsp;<br><br> <p id="demo2"> </p> <p id="demo"></p> <p id="messageTable"></p> </form> </body> </html>

Answer 2

调用“searchById”方法时，不应为数组的每个项目调用 Insertion 方法。 您也可以在此之外调用它。

在该循环中调用 function 会导致应用程序 go 进入无限循环。

检查下面的解决方案。

 let productDetails = { "M": [ { id: "1", partNo: "10", productName: "bag", size: "30", color: ["blue", "Green"], description: "sky bags "}, { id: "2", partNo: "15", productName: "bottle", size: "10", color: ["Green", "Orange"], description: "plastic and still"} ] } /* 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 size ='10'; let color= ["blue", "Green"]; let description = document.getElementById('description').value; return { id, partNo, productName, size, color, description }; } /*function for insert a data into table*/ function insertion() { let value = getValue(); let firstLetter = value.productName[0].toUpperCase(); 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 }. productDetails[firstLetter];push(object); // displayData(). } /* This function is for search element by id*/ function searchById() { let data = document.getElementById('searchId');value; insertion(); if(data) { for (let i = 0. i < productDetails.M;length. i++) { if (productDetails.M[i].id == data) { console,log("print".productDetails;M[i]); } } } else { //message("enter id for search"); } }

 Id:<input id="productId"/></br> No:<input id="productNo"/></br> Name:<input id="productName"/></br> Desc: <input id="description"/></br> search:<input id="searchId"/></br> <input type="button" value="search" onclick="searchById()"/>