ListView Currency into Array

[Miotx]

Hello All,

I have a listView that data is pulling from query1. Inside the listView, I have a collapsible container and inside of that I have a currencyInput inside another container. I have an event that stores the currencyInputs when a change is made into a variable as an array but it only grabs the data from the first collapsible container. How can I do that for every currencyInput inside each collapsible container in the list view so I can take all that data and store it in my Retool DB?

In the screenshot below, I want to store all the currencyInputs as an array in a variable so the variable would look like this:

["1", "2", "4", "5"]

Is that possible?

One addition is that sometimes there could be more than just 2 collapsible containers.... so there could be Store A, Store B, Store C, Store D... etc.

Any help would be appreciated!

Thanks,

[kschirrmacher]

Hey there,

If this is the new listview there's only really one way to do it, which is to push the value into the array on change.

In the change handler:

variable.setValue([...variable.value, self.value])

Not sure how complex the app or your willingness to learn the code side of things is, but if the idea is to store this array on the same row as your store data, consider building a bids table with a foreign key instead. Working with arrays in a relational database is difficult and inefficient.

[Miotx]

Hello,

Thanks for the quick reply! So let's say in the listView, in each container I have currencyInput1 and currencyInput2.. I would put that code in each currencyInput event change but how would I put that exactly?

Thanks,

[kschirrmacher]

Sure thing. Just how you've got it there and then for the value field just do {{[...variable1.value, self.value]}}.

[Miotx]

Got it. I tried that but it did something weird.. see screenshot:

Thanks again for your help!

[kschirrmacher]

Strange! Maybe the reference was quoted at some point? Are there numbers at the bottom of that list?

I'd try right clicking that variable and selecting 'Reset State' and trying again with the code as you've got it there.

[Miotx]

I reset the state but I got the error as shown. Do I add that code to the event change for each currencyInput's or to the container or list view itself?

Thanks,

[kschirrmacher]

Hmm can you show the component tree? Are the currency components placed manually or based on a listview?

[Miotx]

Here you go:

The number of initial collapsible containers (store A, Store B, .. etc) in the listview depends on the query response. The currencyInputs are always the same and I put them in manually inside the listView.

Hope that helps.

Thanks again!

[kschirrmacher]

I'm still confused.

The result you're getting is what I'd expect if you did {{[...'variable1.value', self.value]}} but as the code is written the spread operator should be seeing null or an array.

The code in currency2 definitely doesn't have quotes around the variable value?

[Miotx]

Sorry!! I know.. i'm confused my self.. I made a quick screen recording which I hope might help:

Screen Recording 2024-03-26 at 5.36.03 PM

The code for currency2 is the same as well. I added a screenshot:

I also exported the app in JSON if you would like to replicate it:

test app.json (17.0 KB)

Thank you,

[kschirrmacher]

Hey, got it working by adding [] as the default value for your variable. Dunno why mine worked without it but it makes sense as [...null] is not valid JS.

Hope that works for you now, let me know.

[Miotx]

Thanks so much! Weird but it worked but I noticed it keeps adding to the array.. what I would love is if it is always static.. so the order of the array in the variable is the same as the order of the bids... ["Bid A", "Bid B", "Bid A", "Bid B"]... is that possible you think?

Thanks,

[kschirrmacher]

I think what you want is an object with keys for each store.

{
store_a: {bid_a: value, bid_b: value},
store_b: {bid_a: value, bid_b: value}
}

To set the bid values first set your variable default value to {} and then you'll need to use 'set in' and pass it an array of object keys to add the value.

Then when you need to convert to an array you'd just use Object.values(variable1.data.store_a).

[Miotx]

That makes sense! Thanks for helping again! Just a quick question.. what if I don't know how many stores there will be... e.g. say theres a Store C and Store D as well.. would I put the key path to the query response?

[kschirrmacher]

That's where a list view component would be useful, with the result of your store query used as the source. The component will generate your currency containers in a quantity equal to the length of the query result.

List View | Retool Component Library

You'd need to use some dynamic references in the children components using {{item}} and i but it's not too difficult to work out.

[Miotx]

Hello again,

Yes I am using the listview component but just having a tough time getting all currency inputs from all the list views into an array and updating to my RetoolDB. Thats the last thing I have issues with. I wish Retool would let us use the components inside the listview in query but we can't. Thats the last thing holding me up... I simply want the bids from each store to be uploaded to my retoolDB but having issues with that

Thanks,