nested object is not inserted into table using javascript

Question

I am new to javaScript

here in this code, I'm trying to add companyDetails(nested object of productDetails) in the table by its id.
Like, for id 1 I want to add companyDetails then in the input field of id enter id 1 and insert details in the given input fields
so my problem is that companyDetails(date,address,companyName)is not displayed in the table after adding its value for entered id

let productDetails = [
    {
        id: "1",
        partNo: "10",
        productName: "bag",
        size: "30",
        color: ["Blue"],
        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 to add company details */
function addCompanyDetails() {
    let data = (document.getElementById('productId').value);
    let date1 = document.getElementById('date').value;
    let Caddress = document.getElementById('address').value;
    let Cname = (document.getElementById('companyName').value);

    if (data === '') {
        message("enter id for search");
    }
    for (let i = 0; i < productDetails.length; i++) {
        let companyDetails = productDetails[i].companyDetails ? productDetails[i].companyDetails : { date: "", address: "", companyName: "" };
        let p = companyDetails;
        if ((productDetails[i].id) == (data)) {
            p.companyName = Cname ;
            p.date = date1 ;
            p.address = Caddress;
            console.log(p.companyName);
            console.log(p.date);
            console.log(p.address);
        }
        displayData();
        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 date = document.getElementById('date').value;
    let address = document.getElementById('address').value;
    let companyName = document.getElementById('companyName').value;
    return { id, date, address, companyName };
}

/** * Function is to display the data in table */
function display(productStore, callBack) {
    messageTable(" ");
    let data = productDetails;
    let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><th colspan=7 >company Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</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 { }
        if (data[i].date === undefined) {
            data[i].date = "   ";
        } else { }
        if (data[i].address === undefined) {
            data[i].address = "   ";
        } else { }

        let companyDetails = data[i].companyDetails ? data[i].companyDetails : { date: "", address: "", companyName: "" };

        table += "<tr><td>" + data[i].id + "</td>";
        table += "<td>" + data[i].partNo + "</td>";
        table += "<td>" + data[i].productName + "</td>";
        table += "<td>" + data[i].size + "</td>";
        table += "<td>" + data[i].color + "</td>";
        table += "<td>" + data[i].description + "</td>";
        table += "<td>" + data[i].productWeight + "</td>";
        table += "<td>" + companyDetails.date + "</td>";
        table += "<td>" + companyDetails.address + "</td>";
        table += "<td>" + 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("address").value = "";
    document.getElementById("date").value = "";
    document.getElementById("companyName").value = "";
}

<!DOCTYPE html>
<html>

<head>
    <script src="add.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> <input type="button"
            value="autofill" onclick="auto()"><br><br> 

        <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 company details" onclick="addCompanyDetails()"><br><br>
        <p id="result"></p>
        <p id="demo"></p>
        <p id="messageTableA"></p>
    </form>
</body>

</html>

You calling .companyDetails on objects that doesn't have that property (e.g. procductDetails[i].companyDetails , data[i].companyDetails). And what exactly are you trying to do? I went throughtyour code, I found you are not really adding the input to the grid, just refreshing the grid from the productDetails array. — Nikhil Patil
– Nikhil Patil, Commented Dec 4, 2020 at 11:21
a lot of things are undefined.. like message and auto so while you try to sort that out, I'm just going to build a getObjById function and demonstrate it.. I hope it helps — The Bomb Squad
– The Bomb Squad, Commented Dec 4, 2020 at 11:23

Syed Mushtaq · Accepted Answer · 2020-12-04 12:38:45Z

Here I am adding the Information of company with Specific ID to its respectice Product id like productDetails[i].address = Caddress; in addCompanyDetails() function and then in display function I have replaced companyDetails.address to data[i].address . But be sure it will lose its data when you reload the page .

let productDetails = [
    {
        id: "1",
        partNo: "10",
        productName: "bag",
        size: "30",
        color: ["Blue"],
        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 to add company details */
function addCompanyDetails() {
    let data = (document.getElementById('productId').value);
    let date1 = document.getElementById('date').value;
    let Caddress = document.getElementById('address').value;
    let Cname = (document.getElementById('companyName').value);

    if (data === '') {
        message("enter id for search");
    }
    for (let i = 0; i < productDetails.length; i++) {
        let companyDetails = productDetails[i].companyDetails ? productDetails[i].companyDetails : { date: "", address: "", companyName: "" };
        let p = companyDetails;
        if ((productDetails[i].id) == (data)) {
            p.companyName = Cname ;
            productDetails[i].date = date1 ;
            productDetails[i].address = Caddress;
            productDetails[i].companyName=Cname;
            
            
        }
       
        displayData();
        clearInputData();
    }
}

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

/** * this function is for get the value from form */
function getValue() {
    let id = document.getElementById('productId').value;
    let date = document.getElementById('date').value;
    let address = document.getElementById('address').value;
    let companyName = document.getElementById('companyName').value;
    return { id, date, address, companyName };
}

/** * Function is to display the data in table */
function display(productStore,callBack) {
    messageTable(" ");
    let data = productDetails;
   
   
    let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><th colspan=7 >company Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</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 { }
        if (data[i].companyName === undefined) {
            data[i].companyName = " ";
        } else { }
        if (data[i].date === undefined) {
            data[i].date = "   ";
        } else { }
        if (data[i].address === undefined) {
            data[i].address = "   ";
        } else { }

        table += "<tr><td>" + data[i].id + "</td>";
        table += "<td>" + data[i].partNo + "</td>";
        table += "<td>" + data[i].productName + "</td>";
        table += "<td>" + data[i].size + "</td>";
        table += "<td>" + data[i].color + "</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("address").value = "";
    document.getElementById("date").value = "";
    document.getElementById("companyName").value = "";
}

<!DOCTYPE html>
<html>

<head>
    <script src="home.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> <input type="button"
            value="autofill" onclick="auto()"><br><br> 

        <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 company details" onclick="addCompanyDetails()"><br><br>
        <p id="result"></p>
        <p id="demo"></p>
        <p id="messageTableA"></p>
    </form>
</body>

</html>

The Bomb Squad · Accepted Answer · 2020-12-04 11:29:56Z

getObjById takes in an array of objects and the id you are looking for and returns the object that has your requested id in the given array

//if the id requested does not exist in the array you gave, it returns undefined
function getObjById(arr,id){return arr.filter(a=>a.id==id)[0]}
//example usage(valid/existing id)
console.log(getObjById(productDetails,"1"))
//example usage(invalid/non-existing id)
console.log(getObjById(productDetails,"99"))
//because I have == and not === 1=="1"
console.log(getObjById(productDetails,1))

<script>
//just where I have the array to save line space for the function
let productDetails = [
    {
        id: "1",
        partNo: "10",
        productName: "bag",
        size: "30",
        color: ["Blue"],
        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",
    }
]
</script>

lezabiey · Accepted Answer · 2020-12-05 12:01:04Z

let productDetails = [
    {
        id: "1",
        partNo: "10",
        productName: "bag",
        size: "30",
        color: ["Blue"],
        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 to add company details */
function addCompanyDetails() {
    let data = (document.getElementById('productId').value);
    let Name = (document.getElementById('companyName').value);
    let Cdate = (document.getElementById('date').value);
    let Caddress = (document.getElementById('address').value);
    if (data === '') {
        message("enter id for search");
    }
    for (let i = 0; i < productDetails.length; i++) {
        
        if ((productDetails[i].id) == (data)) {
            productDetails[i].companyDetails = {
                date: "",
                companyName: "",
                address: ""
            } 
            productDetails[i].companyDetails.companyName = Name;
            productDetails[i].companyDetails.date = Cdate;
            productDetails[i].companyDetails.address = Caddress;
            console.log(productDetails[i].companyDetails.companyName);
        }

        displayData();
        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 date = document.getElementById('date').value;
    let address = document.getElementById('address').value;
    let companyName = document.getElementById('companyName').value;
    return { id, date, address, companyName };
}

/** * Function is to display the data in table */
function display(productStore, callBack) {
    messageTable(" ");
    let data = productDetails;
    let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><th colspan=7 >company Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</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 { }
        if (data[i].date === undefined) {
            data[i].date = "   ";
        } else { }
        if (data[i].address === undefined) {
            data[i].address = "   ";
        } else { }

        let companyDetails = data[i].companyDetails ? data[i].companyDetails : { date: "", address: "", companyName: "" };
        table += "<tr><td>" + data[i].id + "</td>";
        table += "<td>" + data[i].partNo + "</td>";
        table += "<td>" + data[i].productName + "</td>";
        table += "<td>" + data[i].size + "</td>";
        table += "<td>" + data[i].color + "</td>";
        table += "<td>" + data[i].description + "</td>";
        table += "<td>" + data[i].productWeight + "</td>";
        table += "<td>" + companyDetails.date + "</td>";
        table += "<td>" + companyDetails.address + "</td>";
        table += "<td>" + 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("address").value = "";
    document.getElementById("date").value = "";
    document.getElementById("companyName").value = "";
}

<!DOCTYPE html>
<html>

<head>
    <script src="add.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> <input type="button"
            value="autofill" onclick="auto()"><br><br> 

        <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 company details" onclick="addCompanyDetails()"><br><br>
        <p id="result"></p>
        <p id="demo"></p>
        <p id="messageTableA"></p>
    </form>
</body>

</html>

now its completely working without removing nested object

Collectives™ on Stack Overflow

nested object is not inserted into table using javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related