Sum div contents that are not hidden

Wappler General Need Help
1

I have several filters that show or hide the div’s using a variable (toggle method) which works fine. I would like to show a sum of the div contents only the div content values that are shown. Is there a way to do this in Wappler?

1 Like
2

Perhaps you could show part of the html and explain what kind of data values it are and where they come from. If it is an data collection shown using a repeater then it is probably better to filter the items instead of hiding. But without more information it is difficult to tell what the best solution would be.

Easiest way to get a sum is when you already have all the values in an array, filter the array and use the sum formatter. Depending on your data would become something like {{ serverconnect1.data.where('visible', true).sum('value') }}.

With static values it is a bit complex, depending on how your data and page is setup, you get an expression like {{ (isVisible1 ? value1 : 0) + (isVisible2 ? value2 : 0) }} which can get very long.

3

This is static data. Here is the test page. Basically I am trying to do the jquery equivalent of this using display:none.

	$("#but").click(function(){
		var sum = 0.0;

$('.num:visible').each(function()

{
sum += parseFloat($(this).text());
$("#grandtotal").text(sum);
});
});

Here is the page

<dmx-value id="total" dmx-bind:value=".num"></dmx-value>
<dmx-value id="toggler" dmx-bind:value="0"></dmx-value>
<div class="container">
	<div class="row">
		<div class="col">
			<button class="btn btn-success" id="but" dmx-on:click="toggler.setValue(1)">Price</button>
		</div>
	</div>
	<div class="row">
		<div class="col-4" id="one" dmx-show="toggler.value ==1">
			<p class="num">1</p>
		</div>
		<div class="col-4" id="two" dmx-show="toggler.value ==1">
			<p class="num">2</p>
		</div>
		<div class="col-4" id="three" dmx-show="toggler.value ==1">
			<p class="num">3</p>
		</div>
		<div class="col-4" id="four" dmx-show="toggler.value ==1">
			<p class="num">4</p>
		</div>
		<div class="col-4" id="five" dmx-show="toggler.value ==1">
			<p class="num">5</p>
		</div>
		<div class="col-4" id="six" dmx-show="toggler.value ==1">
			<p class="num">6</p>
		</div>
		<div class="result"></div>
		<div id="grandtotal">Total</div>
	</div>
</div>
4

Perhaps it is in your case indeed easier to use jQuery. You can combine javascript with App Connect, executing an expression is done with dmx.parse.

$("#but").click(function() {
  var total = 0;
  $(".num:visible").each(function() {
    total += parseFloat($(this).text());
  });
  dmx.parse("total.setValue(" + total + ")");
});

Or you have to make that data dynamic, for example put it in a json file which you load with App Connect or set it directly using:

dmx.app.set("myData", [1,2,3,4,5,6]);

and show it as:

<div class="col-4" id="one" dmx-repeat="myData">
  <p class="num">{{ $value }}</p>
</div>
<div id="grandtotal">Total: {{ myData.sum() }}</div>

You can make it more complex by putting objects in the array with properties that you can filter on.

5

Thanks Patrick

6

Hi Patrick, I just revisited this with a repeat region and I cannot get a total. Just shows empty.

    <div dmx-repeat:names="getdata.data.repeat1" dmx-bind:id="'mynames'+id">
        <div class="price">{{price}}</div>
    </div>
        <div id=“grandtotal”>{{ price.sum() }}/div>

If I use this method
var total = 0;
$(".num:visible").each(function() {
total += parseFloat($(this).text());
});
dmx.parse("total.setValue(" + total + ")");

I get returned

[Error] TypeError: undefined is not an object (evaluating 'a.get')
(anonymous function) — parser.js:655
(anonymous function) — parser.js:705
(anonymous function) — parser.js:455
(anonymous function) — parser.js:388
Global Code — queryamadeusMultiple.php:107

(anonymous function) (dmxAppConnect.js:7:17042)
Global Code (queryamadeusMultiple.php:107)