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.

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.

function updateTotalQuantityNumber() {
  var total = 0;
  jQuery(".quantity-number").each(function () {
    total += parseInt(jQuery(this).text());
  });
  jQuery("#total-requests-number").text(total);
}

updateTotalQuantityNumber();

//create object from the #requests-table rows
function getRequests() {
  var requests = [];
  jQuery("#requests-table tbody tr").each(function () {
    var request = {};
    request.product = jQuery(this).find(".product-name").text();
    request.quantity = jQuery(this).find(".quantity-number").text();
    requests.push(request);
  });
  console.log(requests);
  return requests;
}

//get the unique product names from the object array and sum their quantities
function getUniqueProductNames() {
  var uniqueProductNames = [];
  var requests = getRequests();
  for (var i = 0; i < requests.length; i++) {
    uniqueProductNames.push(requests[i].product);
  }
  //sum the quantities of the unique product names
  let uniqueItems = [...new Set(uniqueProductNames)];
  var uniqueProductNamesQuantity = [];
  console.log(uniqueItems);
  for (var i = 0; i < uniqueItems.length; i++) {
    var quantity = 0;
    for (var j = 0; j < requests.length; j++) {
      if (uniqueProductNames[i] == requests[j].product) {
        quantity += parseInt(requests[j].quantity);
      }
    }
    uniqueProductNamesQuantity.push(quantity);
    console.log(quantity);
  }
  //create object from the unique product names and their quantities and render the results
  var uniqueProductNamesObject = [];
  for (var i = 0; i < uniqueItems.length; i++) {
    var uniqueProductNamesObjectItem = {};
    uniqueProductNamesObjectItem.product = uniqueItems[i];

    uniqueProductNamesObjectItem.quantity = uniqueProductNamesQuantity[i]; //alre
    uniqueProductNamesObject.push(uniqueProductNamesObjectItem);
  }
  console.log(uniqueProductNamesObject);
  var resultCards = jQuery("#result-total");
  resultCards.empty();
  for (var i = 0; i < uniqueProductNamesObject.length; i++) {
    let final_data = `
    
      
        
          
          
          
        
        
          ${uniqueProductNamesObject[i].quantity}
          ${uniqueProductNamesObject[i].product}
        
      
    
  `;

    resultCards.append(final_data);
  }
}
getUniqueProductNames();









                        
                            
                            Product
                            Quantity
                            Customer
                            
                        
                        
                            
                                        
                                
                            Product 4
                            57
                            Nop
                            
                                                                        
                                
                            Product 6
                            1
                            Nop
                            
                                                                        
                                
                            Product 3
                            29
                            Klm
                            
                                                                        
                                
                            Product 3
                            54
                            Jkl
                            
                                                                        
                                
                            Product 4
                            27
                            Jkl
                            
                                                                        
                                
                            Product 5
                            71
                            Jkl
                            
                                                                        
                                
                            Product 6
                            28
                            Jkl
                            
                                                                        
                                
                            Product 1
                            12
                            Def
                            
                                                                        
                                
                            Product 2
                            40
                            Def
                            
                                                                        
                                
                            Product 3
                            49
                            Def
                            
                                                                        
                                
                            Product 4
                            71
                            Def
                            
                                                                        
                                
                            Product 5
                            29
                            Def
                            
                                                                        
                                
                            Product 6
                            63
                            Def
                            
                                                                        
                                
                            Product 1
                            25
                            Ghi
                            
                                                                        
                                
                            Product 4
                            43
                            Ghi
                            
                                                                        
                                
                            Product 3
                            51
                            Ghi
                            
                                                                        
                                
                            Product 5
                            15
                            Ghi
                            
                                                                        
                                
                            Product 3
                            1
                            Abc
                            
                                                                        
                                
                            Product 5
                            59
                            Abc
                            
                                                                                    
                        
                    Total products to be supplied:

user_10353124 · 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

user_4092509 · Answer

Thanks, works like a charm. Made little addition to the getProductTotals() for sorting the resulting object alphabetically by the product name, as right now the object is formed by the first occurrence of unique product.

/*return productTotals sorted by product name alphabetically*/
return Object.keys(productTotals)
.sort()
.reduce((data, key) => {
  data[key] = productTotals[key];
  return data;
}, {});

And that gave me nice alphabetically sorted by product name results

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

2 Answers