Building a HTML string

I need some brainstorming from fellow bubblers :slight_smile:

I have three types of things which are related in one-to-many and many-to-one relationships. I have to combine text data from one thing on the left with related data in the things in the middle and things on the right. The order of things in the resulting HTML string and their inclusion depends from the information in these things, so there are some ifs to be involved.

The question is how to approach to that kind of challenges. On the one hand, this a case of denormalization, but a complex one. @mishav, the expression and list of expressions elements from Toolbox plugin might be an answer, however I don’t know if you can concatenate results from a list of expressions to one non-list result.

Can you give an example, make the problem less abstract?

If you have a list of numbers, you can do :sum. If you have a list of texts, you can do a :join with.

It’s about dictionary entry, on the left we have a term, and on the right the info about the form of the word treated, its grammatical characterization, its definition, its etymology, etc. These are available as “property” - “value” pairs, a list of those for each term.

In particular cases of terms some of these properties are defined or not, their order in resulting display is important.

Thanks for the tip about :join with, I’ll do some experiments with it.

I found a solution by constructing a JSON string and sending it into javascript, where it’s deserialized into an object, which can be processed with the ‘ifs’ that I mentioned.

JSON string is made by List Item Expression which constructs “name” : “value” pairs (from the right side of the data model described above):


This is then ‘injected’ as a JSON string in HTML element (by join with) directly into javascript code:


JS code creates object with JSON.parse(), and this object can be searched with all the ifs.

The speed is not a rocket science, but it hugely depends from the searches in the database and not so much from this tricky setup.

Thanks @mishav, this wouldn’t be possible without your Toolbox :smile:

1 Like

Nicely done!

To help with the speed … append this function on the data source list …
:make static

This tells Bubble that you just want the value, and don’t want it to automatically update the list when it changes.

This approach is useful when you are controlling the timing of the updates anyway.

Also, you might find the need to sanitise the values, in case they contain characters like single quotes or backslashes that disrupt your construction.


Excellent, thanks!

This topic was automatically closed after 70 days. New replies are no longer allowed.