jQuery sum elements?

[MRown]

Hi there,

Was wondering if anyone knew how to sum webapi results, i would be very grateful for your time and help. Spent many hours trying to figure this out (I am not a programer)

In a multistep form advanced JavaScript, the code returns the jQuery elements and I can append the numbers on the form. But would like to sum the numbers before displaying them. Surely this is not impossible, thank you

$("#val_1").text();

$("#val_2").text();

$("#val_3").text();

// reduce or sum function.

// place result into an element:

// append the sum result into html:

$('[data-name="section"] tbody').find('td').first().append('<tr><td class="clearfix cell"><h4 id="sum_Result">'+ sum_Result +

'</h4></td></tr>');

}

[OliverRodrigues]

Hello, I think we would need more details from your code

What's the WebAPI code returning? My initial thoughts here are: can you simply loop through the results of your API and just add them into a variable? 

[MRown]

Hi @OliverRodrigues ,

thank you for taking the time to look into this (FYI the code is using one of your boolean snippets 🙌)

$(function () {

    (function (webapi, $) {
        function safeAjax(ajaxOptions) {
            var deferredAjax = $.Deferred();
            shell.getTokenDeferred().done(function (token) {
                // Add headers for ajax
                if (!ajaxOptions.headers) {
                    $.extend(ajaxOptions, {
                        headers: {
                            "__RequestVerificationToken": token
                        }
                    });
                } else {
                    ajaxOptions.headers["__RequestVerificationToken"] = token;
                }
                $.ajax(ajaxOptions)
                    .done(function (data, textStatus, jqXHR) {
                        validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);
                    }).fail(deferredAjax.reject); //ajax
            }).fail(function () {
                deferredAjax.rejectWith(this, arguments); // On token failure pass the token ajax and args
            });
            return deferredAjax.promise();
        }
        webapi.safeAjax = safeAjax;
    })(window.webapi = window.webapi || {}, jQuery)

    function appAjax(processingMsg, ajaxOptions) {
        return webapi.safeAjax(ajaxOptions)
            .fail(function (response) {
                if (response.responseJSON) {
                    alert("Error: " + response.responseJSON.error.message)
                } else {
                    alert("Error: Web API is not available... ")
                }
            });
    }

    $(document).ready(function () {
        debugger;
        onDisplaySectionChange1();
        onDisplaySectionChange2();
        onDisplaySectionChange3();
        showHideFieldsandTab();

    });

    function showHideFieldsandTab() {
        $("#xy123_optionA_boolean").change(onDisplaySectionChange1);
        $("#xy123_optionB_boolean").change(onDisplaySectionChange2);
        $("#xy123_optionC_boolean").change(onDisplaySectionChange3);

    };


    function onDisplaySectionChange1() {
        var selectedValue = GetRadioSelectedValue($('#xy123_optionA_boolean'));
        if (selectedValue == '1') {
            fetchoptionAvalue().done(function (data) {
                $("#optionA-value").text(data.xy123_value_optionA_svc_cat);

            });
        } else {

            $("#optionA-value").text("0");

        }

    };


    function onDisplaySectionChange2() {
        var selectedValue = GetRadioSelectedValue($('#xy123_optionB_boolean'));
        if (selectedValue == '1') {
            fetchoptionBvalue().done(function (data) {
                $("#optionB-value").text(data.xy123_value_optionB_svc_cat);

            });
        } else {

            $("#optionB-value").text("0");
        }
    };


    function onDisplaySectionChange3() {
        var selectedValue = GetRadioSelectedValue($('#xy123_optionC_boolean'));
        if (selectedValue == '1') {
            fetchoptionCvalue().done(function (data) {
                $("#optionC-value").text(data.xy123_value_optionC_svc_cat);
            });
        } else {
            $("#optionC-value").text("0");
        }
    };




    function fetchoptionAvalue() {
        return appAjax('Loading...', {
            type: "GET",
            url: `/_api/xy123_optionA_svcs?$select=xy123_value_optionA_svc_cat`,
            contentType: "application/json"


        });
    };

    function fetchoptionBvalue() {
        return appAjax('Loading...', {
            type: "GET",
            url: `/_api/xy123_optionB_svcs?$select=xy123_value_optionB_svc_cat`,
            contentType: "application/json"
        });
    };
    function fetchoptionCvalue() {
        return appAjax('Loading...', {
            type: "GET",
            url: `/_api/xy123_optionC_svcs?$select=xy123_value_optionC_svc_cat`,
            contentType: "application/json"
        });
    };



    GetRadioSelectedValue = function (input) {

        if (!!$(input).find("input[type=radio]")) {
            var controlName = $(input).find("input[type=radio]").first().attr("name");
            if (!!controlName) {
                return $("input[name='" + controlName + "']:checked").val();
            }
        }
    };


    
        let num1 = ($("#optionA-value").text);
        let num2 = ($("#optionB-value").text);
        let num3 = ($("#optionC-value").text);
        $("#sum").text(num1 + num2 + num3);
        

        $('[data-name="main-section"] > tbody').prepend('<tr><td class="clearfix cell"><h4 class="locationNameFieldContent" id="sum"> </h4></td></tr>');
    
});

[OliverRodrigues]

I am glad some of my code is being useful to you 😊

there is a lot going on there, but at a first glance, I can't see anything wrong or the reason as to why you can't get the sum working.. I am wondering if it's because you are getting the .text() and this is returning a string

what I would do here is when setting the .text() property, also set the .val() property

.val() can be string/number/array, so perhaps once you set that as a number, it will be stored as a number - and then retrieve the value for the sum

.text() is always text, no matter how you store it

that's my first thoughts.. if that's not the issue, can you summarize a bit your code and where exactly the issue might be.. or if you can create a small version of your code that might be useful  

[MRown]

Thanks @OliverRodrigues, 

so the form has three yes/no options.

when a user chooses yes - a value is retrieved via webApi - for example:

option A yes = 10

option B no = 0

option c yes = 20

so far so good, the code seems to manage to retrieve the options and returns them as jQuery elements

$("#optionA-value").text()
// this element returns as either a "0" when no and as "10" when yes.

ideally, as the options are changed by the user, instead of showing each value separately by appending the element to html.

$('[data-name="main-section"] > tbody').append('<tr><td class="clearfix cell"><h4  id="optionA-value"> </h4></td></tr>');
 <!--   this returns and appends each value correctly for each individual option.-->

 It would be great to use a  sum or reduce function to the jQuery elements, then append the sum to html.

do you think this is possible, i feel like this code is one step away from working - its just summing the values and appending them:

// sum or reduce the elements (if it was only as simple 😂):

$("#sum-value").text() = $("#optionA-value").text() + $("#optionB-value").text() + $("#optionC-value").text().

// then append the sum to html:

$('[data-name="main-section"] > tbody').append('<tr><td class="clearfix cell"><h4 id="sum-value"> </h4></td></tr>');

//presto

[OliverRodrigues]

Hi, can you try using .val() instead of .text()

for displaying the value, use .text().. for any calculation use .val()

[MRown]

Hi @OliverRodrigues ,

Thanks - I tested changing the element from .text() to .val():

// the option value is queried by choosing a boolean, such as:
         if (selectedValue == '1') { //if true queries value.
            fetchOptionAValue().done(function (data) {
                $("#optionA").val(data.xy123_option_A);

            });
        } else {

            $("#optionA").val("0"); // is a zero acceptable with .val()?
        }
    };

// and here is where the magic happens when changes are made with options above, the values are fed into a sum function:


function sum (number1, number2, number3){ 
    return parseInt(number1 + number2 + number3);
       };
       let optionA = $("#optionA").val();
       let optionB = $("#optionB").val();
       let optionC = $("#optionC").val();
       const result = sum (optionA,optionB,optionC);
        
// the (result) is then appended to html, as follows:
  
        const resultHTML = `<td colspan="1" rowspan="1" class="clearfix cell">
        <h3>${result}</h3>
       </td>
        `;
    
        $('[data-name="main-section"] tbody').find('td').append(resultHTML);

the result is NaN.

I appreciate your help.

kind regards,

MRowan

[Fubar]

If you use .text() wrap it in Number() eg.

Number($("#optionA-value").text())

)

[OliverRodrigues]

yes 0 is acceptable, once you add "0" this becomes text

            $("#optionA").val("0"); // is a zero acceptable with .val()?

give it a try on Fubar's solution as well

[MRown]

Hi @Fubar ,

Thanks for your help, wrapping the element in Number() as suggested has returned a 0 instead of NaN, which is better. the value however, is not updating as the options are changed - could this be that the values are loaded before the api call has initialised?

Would this be solved by an event listener (sum on change of input) ?

such as:

 $(!!input).change(sum); //  not sure how to call a function on change of input.

function sum(number1, number2, number3){ 
    return parseInt(number1 + number2 + number3);
       };
       let optionA = Number($("#optionA").text()); // .val() on the elements returned NaN -- .text() wrapped in Number seems to at least show the NaN as zero 🤦‍
       let optionB = Number($("#optionB").text());
       let optionC = Number($("#optionC").text());
       const result = sum (optionA,optionB,optionC);
        

Kind regards,

M Rowan