How to Pass a List from a Custom State into the Toolbox Expression Element?

Hello everyone,

I’m trying to pass a custom state that holds a list of text values into the Toolbox plugin’s Expression element, but I’m not sure how to do this.

My custom state is called PopupsCartItemList (Type: text, “is list” = yes), and each item in the list follows this format: "Id|Quantity|Price".

I want to process each item in this list within the Expression element, split the text by "|", extract the second value (Quantity), and sum all the quantities.

Is there a way to work around this limitation and make the Expression element handle a list of text items? Or should I consider using another approach?

I would really appreciate any advice. Thanks!

You don’t need to use the expression element for this… you can do this in vanilla bubble.

Take the list of texts

format as text: this text: split by |: item #2 with any arbitrary delimiter

Split by (that same arbitrary delimiter)

Each item converted to number

Sum

If you’d rather use the toolbox element, then you can do something similar (i.e. use the same method as above to generate the list of quantities, then use JS to sum them), or you can do the whole thing with JS - just create an array of the original texts.

i.e.

let myList = [custom state list of texts, format as text: this text, with the text inside quotes, and a comma delimiter, split by that same delimiter (comma)].

Then use map() and reduce() to extract the quantities and sum them.

Thank you for your quick response and for providing a detailed explanation. I truly appreciate your help.

For now, my main goal is to retrieve the sum of Quantity, but as the next step, I would also like to calculate the total of Quantity * Price. Therefore, I would like to proceed with implementation using the Toolbox plugin.

However, I am not familiar with JavaScript, and I am unsure how to pass my state list into the Expression element. Regarding the code you kindly provided for using Toolbox, should this be directly written inside the Expression element?

I tried pasting it as is, but it did not work. I also attempted to dynamically replace the values where I thought necessary, but I am still unable to retrieve the sum correctly.

Could you kindly advise me on how to correctly implement this? Your guidance would be greatly appreciated.

Best regards,


Your list variable needs to be a properly formatted array.

It can either just be the array of numbers (quantities) extracted from the texts, or it can be the array of texts itself, depending on what you want to do.

To use Bubble to extract the list of quantities, and just use JS to sum them, do this:

In your array, take the custom state list of texts, format the list as text, for each item split it by | and select item 2.

Use a comma as the delimiter.

Then use the reduce() method on that array in the Expression element to sum the quantities.

If you’d rather do it all in JavaScript then just create the array as a list of texts. e.g.

In your array, just add each item, as a string, from the custom state list.

Then use map() to extract the second number, and reduce() to sum them.

Although, again, there’s no real need to use JavaScript or the expression element for this - it can be done in vanilla Bubble (as can multiplying the quantities by the prices).

1 Like

I just wanted to take a moment to express my sincere gratitude for your support. Thanks to your detailed guidance, I was able to successfully display both the total Quantity and the total Quantity * Price.

I truly appreciate the time and effort you took to explain everything so clearly. Your help has been invaluable, and I couldn’t have done it without you.

Thank you again for your kindness and support!

Best regards,

1 Like