Need help with repeater data behaving randomly

Hi, I need help with a page where the data loads in the repeater having a number value but doesn’t hold and replace that with NAN. Sometime it shows first item as NAN while other as number. Repeater has all the same type of data but why behaving like two?

Please post your questions in the correct forum category. This post is being moved to Community Discussion.

Explain what you are trying to do, what works, and what doesn’t. Also, add any code in a code block as stated in the Forum Guidelines .

First thing, I’ve tried local storage to store & get variable but it’s not working. I’ve used same code twice but working for one function but not for other.

Second thing, as the local storage was not working I used the functions & call them in a series and solve the problem. But an error still occurs while loading repeater item “amount” while using onchange() from dropdown. I can’t explain this but you should try because behavior is unknown. Sometimes item shows properly but sometimes not.

Similar behavior with displaying the entries using reset filter. Below is the code:

import wixData from 'wix-data';
import wixUsers from 'wix-users';
import wixSearch from 'wix-search';
//import {session} from 'wix-storage';
import { local } from 'wix-storage';
import wixWindow from 'wix-window';

export function dropdown1_change(event) {

    local.clear();
    debitsum2();

    $w("#dataset1").onReady(function () {
        $w("#dataset1").refresh();
        wixData.query("kisaandiary").eq("_owner", wixUsers.currentUser.id).eq("expenseFor", $w('#dropdown1').value)
            .find()
            .then((results) => {
 var totalvalues = $w("#dataset1").getTotalCount();
                $w('#repeater1').forEachItem(($item) => {
 var gettingonchange = parseFloat($item("#text19").text);
 if ($item("#text20").text === "Debit") {
 var valueonchange = parseFloat((-1) * gettingonchange);
                        $item("#text19").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: red;'>" + valueonchange.toLocaleString('en-IN', {
                            maximumFractionDigits: 2,
                            style: 'currency',
                            currency: 'INR'
                        }); + "</p>";
                    } else {
 var valueonchange = gettingonchange;
 // console.log("Else Running")
                        $item("#text19").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: green;'>" + valueonchange.toLocaleString('en-IN', {
                            maximumFractionDigits: 2,
                            style: 'currency',
                            currency: 'INR'
                        }); + "</p>";
                    }

                })

            })
    })
 // })
}

The dataset.onReady() function should only be used in the page’s onReady() function, and not in the onChange() event handler.

You are also mixing use of a dataset with wix-data API code. You should use either the dataset or wix-data API code.

You cannot filter a collection using wix-data API and expect the dataset to have the results. The dataset will not change with the query that you have. You will need to filter the dataset using the wix-dataset API .

2 Likes

Good Morning, Thanks for the information & this also helps me in future. But I’ve few more questions.

  1. I’ve update the code & remove the second dataset to avoid confliction. Is this right now.
  2. Problem is still existing. Did you find some obvious mistakes?
  3. I feel code is too lengthy for what I need. Could you please provide the suggestion for this.
  4. Also, how I can sync repeater data so that onchange() there is no data confusion even for seconds.

I’m trying to create account - ledger system. Looking forward to your expert advice. I know I may be asking too much but I respect your time & efforts. Thanks in advance :slight_smile:

import wixData from 'wix-data';
import wixUsers from 'wix-users';
import wixSearch from 'wix-search';
import { local } from 'wix-storage';
import wixWindow from 'wix-window';

$w.onReady(() => {
    debitsum();
    $w("#dataset1").onReady(function () {
        $w("#dataset1").refresh();
 //const filter = wixData.filter().eq("_owner", wixUsers.currentUser.id).eq("expenseFor", $w('#dropdown1').value)
        wixData.query("kisaandiary")
            .find()
            .then((results) => {
 var totalvalues = $w("#dataset1").getTotalCount();
 //   console.log(totalvalues)
                $w('#repeater1').forEachItem(($item) => {
 var getting = parseFloat($item("#text19").text);
 if ($item("#text20").text === "Debit") {
 var value = (-1 * getting);
                        $item("#text19").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: red;'>" + value.toLocaleString('en-IN', {
                            maximumFractionDigits: 2,
                            style: 'currency',
                            currency: 'INR'
                        }); + "</p>";
 //$w("#text19").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: #D12020;'>" + value + "</p>";
                    } else {
 var value = getting;
 // console.log("Else Running")
                        $item("#text19").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: green;'>" + value.toLocaleString('en-IN', {
                            maximumFractionDigits: 2,
                            style: 'currency',
                            currency: 'INR'
                        }); + "</p>";
                    }

                })
            })

    })

});  

export function dropdown1_change(event) {
    local.clear();
    debitsum2();
        wixData.query("kisaandiary")
            .find()
            .then((results) => {
                $w('#repeater1').forEachItem(($item) => {
 var gettingonchange = parseFloat($item("#text19").text);
 if ($item("#text20").text === "Debit") {
 var valueonchange = parseFloat((-1) * gettingonchange);
                        $item("#text19").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: red;'>" + valueonchange.toLocaleString('en-IN', {
                            maximumFractionDigits: 2,
                            style: 'currency',
                            currency: 'INR'
                        }); + "</p>";
                    } else {
 var valueonchange = parseFloat(gettingonchange);
 // console.log("Else Running")
                        $item("#text19").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: green;'>" + valueonchange.toLocaleString('en-IN', {
                            maximumFractionDigits: 2,
                            style: 'currency',
                            currency: 'INR'
                        }); + "</p>";
                    }
                })
            })
}

function allcalculation() {
 let debittotal = parseFloat(local.getItem("Rajjat"));
    debittotal = (debittotal * (-1));
 let credittotal = parseFloat(local.getItem("Kalia"));
 var nettotal = credittotal + debittotal;
 var finalsum = parseFloat(nettotal);
    console.log(finalsum);

 if (finalsum > 0) {
        $w('#totalsumdisplay').html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: green;'>" + finalsum.toLocaleString('en-IN', {
            maximumFractionDigits: 2,
            style: 'currency',
            currency: 'INR'
        }); + "</p>";
    } else {
        $w('#totalsumdisplay').html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: red;'>" + finalsum.toLocaleString('en-IN', {
            maximumFractionDigits: 2,
            style: 'currency',
            currency: 'INR'
        }); + "</p>";
    }
}

function debitsum() {
 let userId = wixUsers.currentUser.id;
 let user = wixUsers.currentUser;
 let isLoggedIn = user.loggedIn;
 let userEmail;

    user.getEmail()
        .then((email) => {
            userEmail = email;
        });

 if (isLoggedIn) {
 const filter = wixData.filter().eq("_owner", wixUsers.currentUser.id).contains("type", "Debit")
        wixData.aggregate("kisaandiary")
            .filter(filter)
            .sum("amount")
            .run()
            .then((results) => {
 var debititems = results.items[0].amountSum;
                debititems = parseFloat(debititems);
 // console.log(debititems);
 //console.log(typeof(debititems));
 if (debititems === 0 || debititems === null || debititems === undefined) {
                    debititems = "0";
 //creditsum();
                } else {
                    debititems = parseFloat(debititems);
 //creditsum();
                }
 var kn = local.setItem("Rajjat", debititems);
                creditsum();
            })
    }
}

function creditsum() {
 let userId = wixUsers.currentUser.id;
 let user = wixUsers.currentUser;
 let isLoggedIn = user.loggedIn;
 let userEmail;

    user.getEmail()
        .then((email) => {
            userEmail = email;
        });

 if (isLoggedIn) {
 const filter = wixData.filter().eq("_owner", wixUsers.currentUser.id).contains("type", "Credit")
        wixData.aggregate("kisaandiary")
            .filter(filter)
            .sum("amount")
            .run()
            .then((results) => {
 var credititems = results.items[0].amountSum;
                credititems = parseFloat(credititems);
 if (credititems === 0 || credititems === null || credititems === undefined) {
                    credititems = "0";
                } else {
                    credititems = parseFloat(credititems);
                }
                local.setItem("Kalia", credititems);
                allcalculation();
            })
    }
}

export function reset_filter(event) {
   $w("#dataset1").refresh();
}

function debitsum2(debval) {
 const filter = wixData.filter().eq("_owner", wixUsers.currentUser.id).eq("expenseFor", $w('#dropdown1').value).contains("type", "Debit")
    wixData.aggregate("kisaandiary")
        .filter(filter)
        .sum("amount", "debititems")
        .run()
        .then((results) => {
 if (results.items.length > 0) {
 //console.log(results.items);
 var d = results.items[0].debititems;
                console.log("D VAQLUE" + d);
                console.log(typeof (d));
 if (d === 0 || d === null || d === undefined) {
 var debval = 0;
                    console.log("Null D " + debval);
                    console.log(typeof (debval));
                    $w('#input1').value = debval;
                    local.setItem("Debitvalue", debval);
                    creditsum2();
 // return debval;
                } else {
 var debval = d;
                    console.log("D " + debval);
                    console.log(typeof (debval));
                    $w('#input1').value = debval;
                    local.setItem("Debitvalue", debval);
                    creditsum2();
 //return debval;
                }

            } else {
 var debval = 0;
                $w('#input1').value = debval;
                local.setItem("Debitvalue", debval);
                creditsum2();
 //return debval;
            }
        })
}

function creditsum2(credval) {
 const filter = wixData.filter().eq("_owner", wixUsers.currentUser.id).eq("expenseFor", $w('#dropdown1').value).contains("type", "Credit")
    wixData.aggregate("kisaandiary")
        .filter(filter)
        .sum("amount", "credititems")
        .run()
        .then((results) => {
 if (results.items.length > 0) {
                console.log(results.items);
 var c = results.items[0].credititems;
 //console.log("D VAQLUE" + c);
 if (c === null || c === 0 || c === undefined) {
                    console.log("Result >0 and entered null loop");
 var credval = 0;
                    console.log("If Credval is null " + credval);
                    console.log(typeof (credval));
 //return (credval);
                    local.setItem("Creditvalue", credval);
                    $w('#input2').value = credval;
                    loda();
                } else {
                    console.log("Result >0 and entered result loop");
 var credval = parseFloat(c);
                    console.log("If Credit Sum available " + credval);
                    console.log(typeof (credval));
 //return (credval);
                    local.setItem("Creditvalue", credval);
                    $w('#input2').value = credval;
                    loda();
                }
            } else {
                console.log("Result < 0 and entered returning 0");
 var credval = 0;
                console.log("If No Credit Entry " + credval);
                console.log(typeof (credval));
 //return (credval);
                local.setItem("Creditvalue", credval);
                $w('#input2').value = credval;
                loda();
            }
        })
}

function loda() {

 var a = parseFloat($w('#input1').value);
 //var a = parseFloat(valueOf(debitsum2()));
 //  var a = parseFloat(local.getItem("Creditvalue"));
 if (a === null || a === undefined || a === 0) {
        a = 0;
    } else {
 var a = (a * (-1));
    }
 // var b = parseFloat(local.getItem("Debitvalue"));
 var b = parseFloat($w('#input2').value);
 if (b === null || b === undefined || b === 0) {
        b = 0;
    } else {
 var b = b;
    }
    console.log("A" + a);
    console.log("B" + b);
 var c = a + b;
 if (c >= 0) {
        $w('#totalsumdisplay').html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: green;'>" + c.toLocaleString('en-IN', {
            maximumFractionDigits: 2,
            style: 'currency',
            currency: 'INR'
        }); + "</p>";
    } else {
        $w('#totalsumdisplay').html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: red;'>" + c.toLocaleString('en-IN', {
            maximumFractionDigits: 2,
            style: 'currency',
            currency: 'INR'
        }); + "</p>";
    }

}

@wix-expert-velo-cert Please understand that we are unable to debug or rewrite lengthy and complex code.

You state that you “removed the second dataset”, but I don’t see two datasets in your original code. Your new code still mixes the use of a dataset with directly doing a query using the wix-data API . The wix-dataset API is not the same as the wix-data API . The following code does not filter the dataset. The results returned from the query are in the variable results , and not in #dataset1 .

wixData.query("kisaandiary")
   .find()
   .then((results) => {
      var totalvalues = $w("#dataset1").getTotalCount();

I recommend reading the following:

  • Velo: Working with the Data API (using content directly with the wix-data API)

  • Connecting Content (using datasets)

You can also look at the various Data examples which demonstrate various ways to use your content.

Hi, Thanks for the links. I study them & make the changes as what I understood. But I’m still unable to fix this issue. Actually, the point is repeater can’t hold the number value on change. It’s shows the number for a while then change it to NaN. For another change, it’s shows content accurately. Did you think that there is something error with the code?

Also, if I create a new dataset & display the values then this will fine. But I don’t know how to display the dataset values using code.

import wixData from 'wix-data';
import wixUsers from 'wix-users';
import wixSearch from 'wix-search';
import { local } from 'wix-storage';
import wixWindow from 'wix-window';

$w.onReady(() => {
    debitsum();
    wixData.query("kisaandiary")
        .find()
        .then((results) => {
 //   console.log(totalvalues)
            $w('#repeater1').forEachItem(($item) => {
 var getting = parseFloat($item("#text19").text);
 if ($item("#text20").text === "Debit") {
 var value = (-1 * getting);
                    $item("#text19").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: red;'>" + value.toLocaleString('en-IN', {
                        maximumFractionDigits: 2,
                        style: 'currency',
                        currency: 'INR'
                    }); + "</p>";
 //$w("#text19").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: #D12020;'>" + value + "</p>";
                } else {
 var value = getting;
 // console.log("Else Running")
                    $item("#text19").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: green;'>" + value.toLocaleString('en-IN', {
                        maximumFractionDigits: 2,
                        style: 'currency',
                        currency: 'INR'
                    }); + "</p>";
                }

            })
        })

 // })
    $w('#dropdown1').onChange(() => dropdown1_change());
});

function dropdown1_change() {
    local.clear();
    debitsum2();
    wixData.query("kisaandiary").eq("_owner", wixUsers.currentUser.id).eq("expenseFor", $w('#dropdown1').value)
        .find()
        .then((results) => {
            $w('#repeater1').forEachItem(($item) => {
 var getting = parseFloat($item("#text19").text);
 if ($item("#text20").text === "Debit") {
 var value = (-1 * getting);
                    $item("#text19").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: red;'>" + value.toLocaleString('en-IN', {
                        maximumFractionDigits: 2,
                        style: 'currency',
                        currency: 'INR'
                    }); + "</p>";
 //$w("#text19").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: #D12020;'>" + value + "</p>";
                } else {
 var value = getting;
 // console.log("Else Running")
                    $item("#text19").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: green;'>" + value.toLocaleString('en-IN', {
                        maximumFractionDigits: 2,
                        style: 'currency',
                        currency: 'INR'
                    }); + "</p>";
                }

            })
        })
}