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

Question

hey all I am new in javascript

Here this code is of insertion, display and searchById in JSON array Using JavaScript. My problem is that after adding more than two productDetails the function searchById(productDetails) is not working for newly added productDetails where is the mistake i've done in my searchById(productDetails) function

here I added all the required code to get better understanding of my problem if you want more information then let me know

 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

The insert function push object into "first letter"'s arry of productDetails. For example if the name value is 'pizza' then there productDetails = { "M": [...], "P": [...]} which 'P' is newly pushed. So I made insert function push object into "M"'s arry. Newly pushed value will be searched by 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

You should not call Insertion method for each item of array when calling the "searchById" method. You can invoke it outside of that as well.

Calling that function in that loop causes the application to go into infinite loop.

Check this below solution.

 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()"/>