Get total quantity for each unique product from a table with javascript

Question

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.

Accepted 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():const getProductTotals = (rowElements) => { /* convert to an array to enable for perform reduce function */ const productRows = rowElements.toArray(); /* loop through each product row, and return an object data */ const productTotals = productRows.reduce((data, row) => { /* get prduct name and quantity from row */ const productName = $(row).children('.product-name').first().text(); const productQuantity = parseInt($(row).children('.product-quantity').first().text()); /* initialize a product quantity if not exixst */ if (!data[productName]) { data[productName] = 0; } /* add the quantity to the product name */ data[productName] += productQuantity; return data; }, {}); return productTotals;};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:{ "Product 1": 20, "Product 2": 100, "Product 3": 1}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:/* render the product total overview by an object type data, which return from "getProductTotals" function */const renderOverview = (data) => { /* select tbody in ID overview table */ const tbody = $('#overview tbody'); /* erase old content */ tbody.html(''); /* loop through the product total data object */ $.each(data, (productName, total) => { /* create the row html */ const html = ` ${productName} ${total} `; /* append the html to the tbody */ tbody.append(html); });};Create a sync function, so every time you add or remove your row execute this function to update the overview:/* update the overview display by execute this function */const sync = () => { const productTotals = getProductTotals($('#product-list tbody tr')); renderOverview(productTotals);};Demo: /* accept array of elements, using reduce function, return an object with product name as key and total as value */const getProductTotals = (rowElements) => { /* convert to an array to enable for perform reduce function */ const productRows = rowElements.toArray(); /* loop through each product row, and return an object data */ const productTotals = productRows.reduce((data, row) => { /* get prduct name and quantity from row */ const productName = $(row).children('.product-name').first().text(); const productQuantity = parseInt($(row).children('.product-quantity').first().text()); /* initialize a product quantity if not exixst */ if (!data[productName]) { data[productName] = 0; } /* add the quantity to the product name */ data[productName] += productQuantity; return data; }, {}); return productTotals;};/* render the product total overview by an object type data, which return from "getProductTotals" function */const renderOverview = (data) => { /* select tbody in ID overview table */ const tbody = $('#overview tbody'); /* erase old content */ tbody.html(''); /* loop through the product total data object */ $.each(data, (productName, total) => { /* create the row html */ const html = ` ${productName} ${total} `; /* append the html to the tbody */ tbody.append(html); });};/* update the overview display by execute this function */const sync = () => { const productTotals = getProductTotals($('#product-list tbody tr').not('#last-row')); renderOverview(productTotals);};/* update at first time */$(document).ready(() => { sync();});/* add product to demo the sync */function addProduct() { const getRandomInt = (max) => { max = Math.floor(max); const min = 1; return Math.floor(Math.random() * (max - min + 1)) + min; }; const randomIndex = getRandomInt(3); const randomQuantity = getRandomInt(100); const html = ` Product ${randomIndex} ${randomQuantity} `; $(html).insertBefore('#last-row'); sync();}/* remove product to demo the sync */function removeProduct(button) { $(button).closest('tr').remove(); sync();} Overview

Product	Total

Product List

Product	Quantity
Product 1	20
Product 2	100
Product 3	1

Advertisement

Answer