When I click again on the modal I get dipplicated rows, so, how to get solution using jquery, json?

FirstDev

<script>
        $(function () {
            var table = $('#example').DataTable({
                data: example,
                columns: [
                    { data: 'UserId', title: 'User ID', show: false },
                    { data: 'OrderCount', title: 'Order Count', className: 'order-detail' },
                    { data: 'FirstName', title: 'First Name', className: 'order-detail1' },
                    { data: 'LastName', title: 'Last Name' },
                    { data: 'Address1', title: 'Address1' },
                    { data: 'Address2', title: 'Address2' },
                    { data: 'Address3', title: 'Address3' },
                    { data: 'Landmark', title: 'Landmark' }
                ]
            });

            // Add event listener for opening and closing details

            $('#example tbody').on('click', 'td.order-detail', function () {
                var orderDetails = table.row(this).data().OrderDetails;
                //console.log(orderDetails);
                var tableContent = "";

                for (counter in orderDetails) {
                    var items = orderDetails[counter].Items;
                    for (secondCounter in items) {

                        tableContent +=
                            "<tr>" +
                            "<td>" + items[secondCounter].Brand + "</td>" +
                            "<td>" + items[secondCounter].OrderDate + "</td>" +
                            "<td>" + items[secondCounter].Price + "</td>" +
                            "<td>" + items[secondCounter].ProductName + "</td>" +
                            "<td>" + items[secondCounter].Qty + "</td>" +
                            "<td>" + items[secondCounter].QtyPacked + "</td>" +
                            "<td>" + items[secondCounter].TotalPrice + "</td>" +
                            "<td>" + items[secondCounter].UOM + "</td>" +
                            "</tr>";
                    }

                };
                let tbodyOrderDetails = $("#details tbody");
                if (tbodyOrderDetails.children().length == 0) {
                    tbodyOrderDetails.append(tableContent);
                    // $("#exampleModal").modal("show");
                }
                $("#exampleModal").modal("show");

                //console.log(orderDetails[0].Items[0].Brand);
            });


        })
    </script>

<script>
        var example = [
            {
                "UserId": 1,
                "OrderCount": 2,
                "FirstName": "Binu",
                "LastName": "George",
                "Address1": "Add1",
                "Address2": "Add2",
                "Address3": "-",
                "Mobile": "8606888265",
                "Landmark": "Land mark",
                "OrderDetails": [
                    {
                        "OrderId": "6556",
                        "Items": [
                            {
                                "Id": 1,
                                "ItemId": 1,
                                "OrderId": "6556",
                                "ProductName": "Rice",
                                "Brand": "Pavizham",
                                "Price": 150.00,
                                "UOM": "Kg",
                                "Qty": 3.00,
                                "QtyPacked": 3.00,
                                "TotalPrice": 450.0000,
                                "OrderDate": "16 Jul 2020"
                            },
                            {
                                "Id": 2,
                                "ItemId": 2,
                                "OrderId": "6556",
                                "ProductName": "Rice",
                                "Brand": "Nirapara",
                                "Price": 160.00,
                                "UOM": "Kg",
                                "Qty": 3.00,
                                "QtyPacked": 3.00,
                                "TotalPrice": 480.0000,
                                "OrderDate": "16 Jul 2020"
                            }
                        ]
                    },
                    {
                        "OrderId": "65561",
                        "Items": [
                            {
                                "Id": 3,
                                "ItemId": 5,
                                "OrderId": "65561",
                                "ProductName": "Rice",
                                "Brand": "Matta",
                                "Price": 170.00,
                                "UOM": "Kg",
                                "Qty": 1.00,
                                "QtyPacked": 1.00,
                                "TotalPrice": 170.0000,
                                "OrderDate": "16 Jul 2020"
                            }
                        ]
                    }
                ]
            },
            {
                "UserId": 2,
                "OrderCount": 1,
                "FirstName": "Andrea",
                "LastName": "Binu",
                "Address1": "Add1",
                "Address2": "Add2",
                "Address3": "Add3",
                "Mobile": "1234567890",
                "Landmark": "LandMark",
                "OrderDetails": [
                    {
                        "OrderId": "45544",
                        "Items": [
                            {
                                "Id": 4,
                                "ItemId": 3,
                                "OrderId": "45544",
                                "ProductName": "Rice",
                                "Brand": "Surekha",
                                "Price": 180.00,
                                "UOM": "Kg",
                                "Qty": 3.00,
                                "QtyPacked": 3.00,
                                "TotalPrice": 540.0000,
                                "OrderDate": "16 Jul 2020"
                            }
                        ]
                    }
                ]
            }
        ]
    </script>

EDIT: Updated Markdown formatting.

kthorngren

Looks like you are updating the table data by directly updating the HTML instead of using Datatable APIs. See this FAQ for options.

Kevin