Hi! I'm using a "Number Input" component in a llst-view, to calculate a required result. Is there a way to sum all the results I get, for all list items, together (outside the list view)? Thank you!
Welcome to the community @ronasilb
You ListView is based on am array of objects, whether that comes from a SQL Query or REST endpoint (most typical) or a transformer or other source, it is an array of objects and you can do all kinds of things with arrays like sum up every item in it.
Here is some code on how:
// Your ListBox Source array example
const arr = [
{id: 1, salary: 10},
{id: 2, salary: 20},
{id: 3, salary: 30},
];
// Put this into a transformer and lets call it trSumValues
return arr.reduce((accumulator, object) => {
return accumulator + object.salary;
}, 0);
Set a Textbox (or whatever) component's Default value to {{trSumValues.value}} and it will output 60 in this case.
Thank you so much Brad for your quick response.
I'm afraid I'm not quite sure how to convert this code to my table.
Am I getting these parts right?
return listView2.reduce((accumulator, numberInput20) => {
return accumulator + data.numberInput20;
}, 0);
Also, I'm not sure what I should input instead of the "accumulator".
Thank you so much.
You do not want to count your ListView, you want to count the source array your ListView is using to display data. ListView does not hold a copy of any data really.
In your NumberInput component you have a Default value that looks something like this: {{myQuery.data.myFieldToCount[i]}}.
Your Source is then myQuery.data. This does bring up another point I forgot to mention is to make sure your source array is in the correct format. If you used a SQL query your data probably looks more like this:
//myQuery.data
{
id: [1,2,3],
salary: [10,20,30]
};
In which case your transformer will look just slightly different:
return arr.reduce((accumulator, object) => {
return accumulator + object;
}, 0);
One way to easily tell is if your Default value looks like this (notice the [i] in a different place) {{myQuery.data[i].myFieldToCount}} you will use the transformer version my last post. If it is {{myQuery.data.myFieldToCount[i]}} you will use the version in this post.
The accumulator variable is temporary and you could call it almost anything you want; i, result, myBigNose.
Knowing your Javascript array methods well (like reduce, map, forEach and so on) will help you a lot in working with data in Retool. You will use them a lot in transformers especially.
Thank you Brad. My number input component is calculated - i.e, "{{numberInput16.value + numberInput19.value}}", when both numberInput16 and numberInput19 are calculated as well.
So, the source does not contain the field I would like to count.
What is the array and the objects in this case?
Hmmm, then I honestly have no idea how you are getting real data into your ListView. I suspect a cross up in terminology.
If you would, please send a screenshot of your ListView and its Inspect panel so I can see your setup.
I managed to get the code right - but only using a query, not a transformer; and using a query I can't reference it (no "data" available):
let numberInputValues = [];
for (i=0; i < listView2.data.length;i++){
numberInputValues.push( listView2.data[i].numberInput20);
}
let sum = numberInputValues.reduce((partialSum, a) => partialSum + a, 0);
return sum
---- the result shows nowhere (see screenshot).
Thanks, not what I asked for, but I should have, so that is helpful.
Please send a screen cap of your ListView in your app and then its Inspect Panel like this:
Here's a quick example of how I'd usually do this - the data source in this case is an array of objects held as a temporary item but you could populate this from a REST query or any other source just as well. Not sure if this is what you're trying to achieve or not.
listview calculator.json (6.3 KB)
2 Likes