I have a resulting table from a backend that returns products and quantities. What i need to achieve is to check for repeating products and sum their quantities in a Overview below the table. I’ve written javascript, that partially works, but with more data i saw that it is not returning correct values and the summary shows too big numbers.
If you delete a chunk of html with rows from the table it works as expected, but cannot find the problem at this point. Also my code may not be the optimal to achieve what i need so any suggestions are welcome.
JavaScript
x
79
79
1
function updateTotalQuantityNumber() {2
var total = 0;3
jQuery(".quantity-number").each(function () {4
total += parseInt(jQuery(this).text());5
});6
jQuery("#total-requests-number").text(total);7
}8
9
updateTotalQuantityNumber();10
11
//create object from the #requests-table rows12
function getRequests() {13
var requests = [];14
jQuery("#requests-table tbody tr").each(function () {15
var request = {};16
request.product = jQuery(this).find(".product-name").text();17
request.quantity = jQuery(this).find(".quantity-number").text();18
requests.push(request);19
});20
console.log(requests);21
return requests;22
}23
24
//get the unique product names from the object array and sum their quantities25
function getUniqueProductNames() {26
var uniqueProductNames = [];27
var requests = getRequests();28
for (var i = 0; i < requests.length; i++) {29
uniqueProductNames.push(requests[i].product);30
}31
//sum the quantities of the unique product names32
let uniqueItems = [new Set(uniqueProductNames)];33
var uniqueProductNamesQuantity = [];34
console.log(uniqueItems);35
for (var i = 0; i < uniqueItems.length; i++) {36
var quantity = 0;37
for (var j = 0; j < requests.length; j++) {38
if (uniqueProductNames[i] == requests[j].product) {39
quantity += parseInt(requests[j].quantity);40
}41
}42
uniqueProductNamesQuantity.push(quantity);43
console.log(quantity);44
}45
//create object from the unique product names and their quantities and render the results46
var uniqueProductNamesObject = [];47
for (var i = 0; i < uniqueItems.length; i++) {48
var uniqueProductNamesObjectItem = {};49
uniqueProductNamesObjectItem.product = uniqueItems[i];50
51
uniqueProductNamesObjectItem.quantity = uniqueProductNamesQuantity[i]; //alre52
uniqueProductNamesObject.push(uniqueProductNamesObjectItem);53
}54
console.log(uniqueProductNamesObject);55
var resultCards = jQuery("#result-total");56
resultCards.empty();57
for (var i = 0; i < uniqueProductNamesObject.length; i++) {58
let final_data = `<div class="col">59
<div class="card card-body shadow">60
<div class="d-inline-flex align-items-center" style="min-height:128px">61
<div class="me-2">62
<div class="bg-light p-3 rounded-circle">63
<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill="currentColor" class="bi bi-box" viewBox="0 0 16 16">64
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>65
</svg>66
</div>67
</div>68
<div>69
<span class="fw-bold display-5 mb-5" data-vanilla-counter="" data-start-at="0" data-end-at="125" data-time="1000" data-delay="60" data-format="{}">${uniqueProductNamesObject[i].quantity}</span>70
<p class="lead" editable="inline">${uniqueProductNamesObject[i].product}</p>71
</div>72
</div>73
</div>74
</div>`;75
76
resultCards.append(final_data);77
}78
}79
getUniqueProductNames();JavaScript
1
142
142
1
<html>2
<head>3
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>4
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>5
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>6
</head>7
<body>8
<table class="table" id="requests-table">9
<thead>10
<tr>11
<th scope="col">Product</th>12
<th scope="col">Quantity</th>13
<th scope="col">Customer</th>14
</tr>15
</thead>16
<tbody>17
<!--fwp-loop-->18
19
<tr>20
<td class="product-name">Product 4</td>21
<td class="quantity-number">57</td>22
<td>Nop</td>23
</tr>24
25
<tr>26
<td class="product-name">Product 6</td>27
<td class="quantity-number">1</td>28
<td>Nop</td>29
</tr>30
31
<tr>32
<td class="product-name">Product 3</td>33
<td class="quantity-number">29</td>34
<td>Klm</td>35
</tr>36
37
<tr>38
<td class="product-name">Product 3</td>39
<td class="quantity-number">54</td>40
<td>Jkl</td>41
</tr>42
43
<tr>44
<td class="product-name">Product 4</td>45
<td class="quantity-number">27</td>46
<td>Jkl</td>47
</tr>48
49
<tr>50
<td class="product-name">Product 5</td>51
<td class="quantity-number">71</td>52
<td>Jkl</td>53
</tr>54
55
<tr>56
<td class="product-name">Product 6</td>57
<td class="quantity-number">28</td>58
<td>Jkl</td>59
</tr>60
61
<tr>62
<td class="product-name">Product 1</td>63
<td class="quantity-number">12</td>64
<td>Def</td>65
</tr>66
67
<tr>68
<td class="product-name">Product 2</td>69
<td class="quantity-number">40</td>70
<td>Def</td>71
</tr>72
73
<tr>74
<td class="product-name">Product 3</td>75
<td class="quantity-number">49</td>76
<td>Def</td>77
</tr>78
79
<tr>80
<td class="product-name">Product 4</td>81
<td class="quantity-number">71</td>82
<td>Def</td>83
</tr>84
85
<tr>86
<td class="product-name">Product 5</td>87
<td class="quantity-number">29</td>88
<td>Def</td>89
</tr>90
91
<tr>92
<td class="product-name">Product 6</td>93
<td class="quantity-number">63</td>94
<td>Def</td>95
</tr>96
97
<tr>98
<td class="product-name">Product 1</td>99
<td class="quantity-number">25</td>100
<td>Ghi</td>101
</tr>102
103
<tr>104
<td class="product-name">Product 4</td>105
<td class="quantity-number">43</td>106
<td>Ghi</td>107
</tr>108
109
<tr>110
<td class="product-name">Product 3</td>111
<td class="quantity-number">51</td>112
<td>Ghi</td>113
</tr>114
115
<tr>116
<td class="product-name">Product 5</td>117
<td class="quantity-number">15</td>118
<td>Ghi</td>119
</tr>120
121
<tr>122
<td class="product-name">Product 3</td>123
<td class="quantity-number">1</td>124
<td>Abc</td>125
</tr>126
127
<tr>128
<td class="product-name">Product 5</td>129
<td class="quantity-number">59</td>130
<td>Abc</td>131
</tr>132
</tbody>133
</table>134
<h4>Total products to be supplied: <span id="total-requests-number"></span>135
</h4>136
<div class="container">137
138
139
<div class="row row-cols-1 row-cols-md-2 justify-content-center row-cols-lg-3 py-4 g-4 counter-1" id="result-total"></div>140
</div>141
</body>142
</html>Advertisement
Answer
I’m assuming your requirement is to optimize the code to calculate the total for each product and display the total in the overview.
You can start with by getting the product total through looping each row, return an object data with product name as key and value as total e.g. { "Product 1": 10 }. Following example is achieve by using reduce():
JavaScript
1
24
24
1
const getProductTotals = (rowElements) => {2
/* convert to an array to enable for perform reduce function */3
const productRows = rowElements.toArray();4
5
/* loop through each product row, and return an object data */6
const productTotals = productRows.reduce((data, row) => {7
/* get prduct name and quantity from row */8
const productName = $(row).children('.product-name').first().text();9
const productQuantity = parseInt($(row).children('.product-quantity').first().text());10
11
/* initialize a product quantity if not exixst */12
if (!data[productName]) {13
data[productName] = 0;14
}15
16
/* add the quantity to the product name */17
data[productName] += productQuantity;18
19
return data;20
}, {});21
22
return productTotals;23
};24
By execute getProductTotals($('#product-list tbody tr')), you will get an object data which looks like this, key as product name and value as product total:
JavaScript
1
6
1
{2
"Product 1": 20,3
"Product 2": 100,4
"Product 3": 15
}6
Then render the overview by using the object data. Loop through the object properties which is the product name and total, and append to overview:
JavaScript
1
23
23
1
/* render the product total overview by an object type data, which return from "getProductTotals" function */2
const renderOverview = (data) => {3
/* select tbody in ID overview table */4
const tbody = $('#overview tbody');5
6
/* erase old content */7
tbody.html('');8
9
/* loop through the product total data object */10
$.each(data, (productName, total) => {11
/* create the row html */12
const html = `13
<tr>14
<td>${productName}</td>15
<td>${total}</td>16
</tr>17
`;18
19
/* append the html to the tbody */20
tbody.append(html);21
});22
};23
Create a sync function, so every time you add or remove your row execute this function to update the overview:
JavaScript
1
6
1
/* update the overview display by execute this function */2
const sync = () => {3
const productTotals = getProductTotals($('#product-list tbody tr'));4
renderOverview(productTotals);5
};6
Demo:
JavaScript
1
86
86
1
/* accept array of elements, using reduce function, return an object with product name as key and total as value */2
const getProductTotals = (rowElements) => {3
/* convert to an array to enable for perform reduce function */4
const productRows = rowElements.toArray();5
6
/* loop through each product row, and return an object data */7
const productTotals = productRows.reduce((data, row) => {8
/* get prduct name and quantity from row */9
const productName = $(row).children('.product-name').first().text();10
const productQuantity = parseInt($(row).children('.product-quantity').first().text());11
12
/* initialize a product quantity if not exixst */13
if (!data[productName]) {14
data[productName] = 0;15
}16
17
/* add the quantity to the product name */18
data[productName] += productQuantity;19
20
return data;21
}, {});22
23
return productTotals;24
};25
26
/* render the product total overview by an object type data, which return from "getProductTotals" function */27
const renderOverview = (data) => {28
/* select tbody in ID overview table */29
const tbody = $('#overview tbody');30
31
/* erase old content */32
tbody.html('');33
34
/* loop through the product total data object */35
$.each(data, (productName, total) => {36
/* create the row html */37
const html = `38
<tr>39
<td>${productName}</td>40
<td>${total}</td>41
</tr>42
`;43
44
/* append the html to the tbody */45
tbody.append(html);46
});47
};48
49
/* update the overview display by execute this function */50
const sync = () => {51
const productTotals = getProductTotals($('#product-list tbody tr').not('#last-row'));52
renderOverview(productTotals);53
};54
55
/* update at first time */56
$(document).ready(() => {57
sync();58
});59
60
/* add product to demo the sync */61
function addProduct() {62
const getRandomInt = (max) => {63
max = Math.floor(max);64
const min = 1;65
return Math.floor(Math.random() * (max - min + 1)) + min;66
};67
const randomIndex = getRandomInt(3);68
const randomQuantity = getRandomInt(100);69
const html = `70
<tr>71
<td class="product-name">Product ${randomIndex}</td>72
<td class="product-quantity">${randomQuantity}</td>73
<td>74
<button type="button" onclick="removeProduct(this)">Remove</button>75
</td>76
</tr>77
`;78
$(html).insertBefore('#last-row');79
sync();80
}81
82
/* remove product to demo the sync */83
function removeProduct(button) {84
$(button).closest('tr').remove();85
sync();86
}JavaScript
1
53
53
1
<b>Overview</b>2
<div id="overview">3
<table border="1" cellpadding="5">4
<thead>5
<tr>6
<th>Product</th>7
<th>Total</th>8
</tr>9
</thead>10
<tbody>11
</tbody>12
</table>13
</div>14
<br />15
<b>Product List</b>16
<table id="product-list" border="1" cellpadding="5">17
<thead>18
<tr>19
<th>Product</th>20
<th>Quantity</th>21
<th></th>22
</tr>23
</thead>24
<tbody>25
<tr>26
<td class="product-name">Product 1</td>27
<td class="product-quantity">20</td>28
<td>29
<button type="button" onclick="removeProduct(this)">Remove</button>30
</td>31
</tr>32
<tr>33
<td class="product-name">Product 2</td>34
<td class="product-quantity">100</td>35
<td>36
<button type="button" onclick="removeProduct(this)">Remove</button>37
</td>38
</tr>39
<tr>40
<td class="product-name">Product 3</td>41
<td class="product-quantity">1</td>42
<td>43
<button type="button" onclick="removeProduct(this)">Remove</button>44
</td>45
</tr>46
<tr id="last-row">47
<td colspan="3">48
<button type="button" onclick="addProduct()">Add Random Product</button>49
</td>50
</tr>51
</tbody>52
</table>53
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>