How Can I Create an Array of Key-Value Pairs in a State?

[omerbialer1]

Hi everyone,

I’m working on a project in Bubble.io and need to create a structure that functions like an array of key-value pairs (similar to a dictionary or map in other programming languages), but it needs to be stored in a state rather than in the database.

Is there a way to achieve this within Bubble.io’s state management capabilities? What would be the best approach to dynamically add, retrieve, and modify these key-value pairs in a state?

Any guidance or examples would be greatly appreciated!

Thanks in advance!

[georgecollier]

You’ve run into a big Bubble limitation which is that we can’t create non-data type objects in custom states / create things on the front end only.

There’ll be other solutions proposed by others that might be better than what I can come up with off the top of my head:

I think you’ll have to settle for having two lists of texts. One for keys, one for values. Make sure they’re all unique, some way or another.

To display all key/value pairs e.g in a JSON, run :format as text on a list of numbers. The list of numbers should equal the number of pairs you have. Inside :format as text, {keys: item#This number:formatted as JSON safe, values:item# This number:formatted as JSON safe}.

That has challenges (the keys and values must be in the same order) but you might be able to make it work.

[omerbialer1]

Thanks for the detailed respone!

Thats actually an interesting solution. If i understand correctly you offer managing two states, each with a list of texts, and evetually connecting them into a single json file

@georgecollier

That has challenges (the keys and values must be in the same order) but you might be able to make it work.

About the challenge you mentioned that is actually the issue for me beacuse some values might be empty so i will need to make sure that they do not ruin my order

Thanks again! I will give an update here if I try it out

[omerbialer1]

Thinking about it again - I left out some things that might make your two-list solution not work fully for my use case

I want the users not only to be able to add values to a key:value relation but also to be able to edit or delete these values

This might makes it complicated using the two lists solution because it would be rather complicated to edit/delete a value based on their list location

I know there are workarounds that can manage that but I think that might be not ideal for this use case

I think the ideal solution should enable me to be able to find a specific value according to it’s key and not the list’s location

Any ideas on how to implement something of that sort?

[eliot1]

Hi @omerbialer1 I created a keyvaluepair custom state with just a single a text, 2 delimiters and some find&replace regex rules.
This is the result, an array you can use in a RG or reformat in JSON for an API call:

I’m not sure if this is exactly what you were looking for. Let me know if you want me to share the details

[omerbialer1]

Hey @eliot1 !
This looks promising! can you share how you have done it?

[eliot1]

Yep sure

• custom state “keyvaluepairs”, type text, default empty

• one input, text, to enter new key with this workflows (one for the first input and one when the custom state is not empty):
  

  

• one RG with labels and inputs,

  • data type = text, data source = index’s keyvaluepairs :splitby “|”
  • label = current cell’s text:splitby ": " first item
  • value = current cell’s text:splitby ": " last item

• When one of the RG inputs is changed (and input value not empty):
  

  

• When one of the RG inputs is changed (and input value empty):
  

  

• Same technique as the RG with inputs to display the key and value:
  

Hope this help!

[georgecollier]

Smart option! Better than what I came up with.

[omerbialer1]

That is absolutley perfect!!
Ive created it and its just what I was looking for! thanks!

And btw - can you share how you handled the WF when the state is empty in the beginning and how you handle differently when the value input is empty?

I have a weird issue I do not understand yet of cases when i change the value of one key and its being changed for more keys at once

[eliot1]

Glad it helps

Here when the custom state is empty in the beginning and I add a key:

And here when the input change but value is empty (the regex is slightly different, to delete the key from the text with the following “|”):

Note:
Make sure when you add keys to have "[key]: " with the space to match the regex condition.

[DjackLowCode]

@omerbialer1 - you can take this a step further if you need to work with an “array” of objects using this approach: Dynamic row addition in Repeating Group and bulk CRUD of Things using vanilla Bubble

[ahmed.elkaffas1]

I implemented this using 2 arrays of custom states and ensured always that they are in the right order because a user could delete & edit in the “key” custom states.
I used a small plugin called “Find Index” which returns the index of a specific value in a list of values and then I used this index to adjust the “values” custom states list.