How to iterate over js elements

I have this java class:

public class ProductBucketDto {
    ProductDto productDto;
    int quantityInBucket;
    boolean available;
}

Objects of this class are in List:

List<ProductBucketDto>()

I am adding this element to the page and want to display the sum of the quantity parameters for the entire List. Similar Java code:

int quantity = 0;
        for(ProductBucketDto productBucketDto : bucket){
            quantity += productBucketDto.getQuantityInBucket();
        }
        System.out.println(quantity);

I am trying to do this now, but my attempts fail because I don’t know much Js. The logic is as follows: there is a js function, we pass this array there, go around it and get the quantityInBucket elements from it. We sum them up and display them in the span we need.

With jquery mo code looks like this:

$(function(){
  let quantitySpan = $('qantity');
  let totalQantity = 0;
  function caltQuantity(array){
    let result = objArray.map(array => array.quantityInBucket);
    result.each(function(){
      totalQantity += $(this);
    })
    quantitySpan.text(totalQantity);
  } 
})

my html code:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="./script.js"></script>
</head>
<body>
    <span id="qantity"><script>caltQuantity(myArray);</script></span>
</body>

myArray I receive from the server side and pass to the form as an attribute

EDIT:
Im put my array to html like this

<input type="hidden" name="bucketCount" th:value="${session.bucket}" />

My js code looks like this now :

$(function(){
    let quantitySpan = $('#quantity');
    let totalQantity = 0;
    function caltQuantity(){
        let array = $('#bucketCount');
        let result = array.map(({ quantityInBucket }) => quantityInBucket);
        var totalQuantity = 0;
        for(var i=0;i<result.length;i++){
            totalQantity += result[i];
        }
        quantitySpan.text(totalQantity);
    }
})

Im call my function from html like this:

Shopping cart <span id="quantity" class="badge badge-light"><script>caltQuantity()</script></span>

but it doesn’t work. I do not know what it is connected with

Answer

If you are ok using a index to iterate through the array. Then the following will carry out the sum.

$(function(){
  let quantitySpan = $('qantity');
  let totalQantity = 0;
  function caltQuantity(array){
    let result = objArray.map(array => array.quantityInBucket);
    var totalQuantity = 0;
    for(var i=0;i<result.length;i++){
      totalQantity += result[i];
    }
    quantitySpan.text(totalQantity);
  } 
})

An alternative is to use reduce.

$(function(){
  let quantitySpan = $('qantity');
  let totalQantity = 0;
  function caltQuantity(array){
    let result = objArray.map(array => array.quantityInBucket);
    var totalQantity = result.reduce((a, b) => a + b, 0);
    quantitySpan.text(totalQantity);
  } 
})

If you want to call from the shopping cart icon being clicked then replace:

Shopping cart <span id="quantity" class="badge badge-light"><script>caltQuantity()</script></span>

with

Shopping cart <span id="quantity" class="badge badge-light" onclick="callQuantity();"></span>

If it is something you want to call when the element loads then you should be able to replace onclick with onload.

Advertisement

Answer