Replace single value from text list field Using JS to Bubble

boston85719 · 2024-12-16T08:40:30.858Z

chris.williamson1996:

List = Set list = parent group list:converted to text:find and replace (old value you want to change with new value):join with (,)

I tried this…basically if my list has values such as 123, 456, 123456, 789, 123456789 and I attempt to change the value of 123, then the values of 123456 and 123456789 also get changed because the :find and replace will take the original value of 123 and replace that with the replacement value in all values in the list of text that contain the original value, which means, changing 123 to 321 will also change 123456 to 321456 and 123456789 to 321456789

chris.williamson1996 · 2024-12-16T09:08:04.771Z

Very could point, did not consider this scenario

ihsanzainal84 · 2024-12-16T12:45:33.929Z

Try using a Regex expression in the find and replace.

I have something similar set up for my pseudo JS values. ChatGPT is great at generating regex expressions.

boston85719 · 2024-12-16T14:47:59.637Z

It’s all set up and working. Do you have a regex expression that would do this?

bubble.trouble · 2024-12-16T16:12:56.127Z

@boston85719 the whole point of this exercise being to save a repeating list group items at the same time correct?

rpetribu · 2024-12-16T17:33:09.253Z

Couldn’t handle myself!
Did in just 3 steps with pure Bubble.
See if works for you.

Bubble

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Editor: Here

Bluebird · 2024-12-17T01:00:52.467Z

is there a good reason why you’re using a single text and the split by operator instead of an actual list of text? why not set “value is a list” to true in the js to bubble plugin. then ask chatgpt to rewrite this same function, but to accept an array. just place 2 sqaure brackets, and between them, a dynamic expression (this assumes that the updated list’s value is also an array now): Js Edit Container ID Updated List's values each item: formatted as json safe. now, js to bubble spits out an array that you save to the database. i see that in your use case, you only accept numbers, but in general, it’s better to use formatted as json safe in the old and new value in the js too instead of writing the quotes yourself

boston85719 · 2024-12-17T06:22:39.497Z

rpetribu:

Did in just 3 steps with pure Bubble.

Screen Shot 2024-12-17 at 1.21.03 PM1357×717 61.7 KB

This is what I see on the link you provided…it seems to use 5 steps and the Ultimate Toolkit plugin…Do you have a version that uses pure Bubble and does it in 3 steps?

boston85719 · 2024-12-17T06:25:54.202Z

Bluebird:

i see that in your use case, you only accept numbers

The example was just numbers, the setup works for any combination of letters, numbers and special characters

Bluebird:

is there a good reason why you’re using a single text and the split by operator instead of an actual list of text? why not set “value is a list” to true in the js to bubble plugin. then ask chatgpt to rewrite this same function, but to accept an array. just place 2 sqaure brackets, and between them, a dynamic expression (this assumes that the updated list’s value is also an array now):

Couldn’t get chatgpt to do that successfully…if you can take the code and have chatgpt alter it to work with js to bubble as a list please share here the code. I tried myself for more time than I was willing to waste on it, while the setup I have works just fine, just requires me to remove the square brackets and the quotes.

boston85719 · 2024-12-17T06:27:10.165Z

bubble.trouble:

the whole point of this exercise being to save a repeating list group items at the same time correct?

No, it is to change a single value in a list of texts (ie: a data field that is of type text and is a list) and not have the list of texts order change.

boston85719:

When attempting to make changes to the list of text, I ran into a poor UX, which is that it is not possible to change a particular text value in the list and keep the list in the same order.

adamhholmes · 2024-12-17T09:26:51.577Z

Bluebird:

is there a good reason why you’re using a single text and the split by operator instead of an actual list of text? why not set “value is a list” to true in the js to bubble plugin.

Yeah…

Surely it’s easier, and more efficient, to use an array here…

Then just find the index of the item (using findIndex()) and reassign the value for that item.

ihsanzainal84 · 2024-12-17T09:40:13.374Z

Here’s a demo: Demo

Editor

Here’s the regex I got
(?<=^|\|\|)\s*(daynamic_value)\s*(?=\|\||$)

I use || as a delimiter in the demo as that’s my usual practice for this sort of things.

ChatGPT does have a little issue with Bubble regex but you can guide it with this Bubble regex Doc.

rpetribu · 2024-12-17T10:23:41.166Z

There are 5 steps so you can see what I am caching. The toolbox is just for this purpose. You can simply save the variables in some custom state… no big deal. Nothing hard to do… as I said, pure Bubble.

boston85719 · 2024-12-17T11:16:07.484Z

Thanks for that…this works great. Now two approaches in the toolbelt

adamhholmes:

Surely it’s easier, and more efficient, to use an array here…

Then just find the index of the item (using findIndex()) and reassign the value for that item.

How is this done? Would be great to get another working example on this tip thread

adamhholmes · 2024-12-17T11:54:23.949Z

Assuming you have a list of texts: (e.g.)

let myList = [
  'item 1',
  'item 2',
  'item 3',
  'item 4'
]

etc.

Then you can use the following:

function updateList(originalValue, newValue) {
  let index = myList.findIndex(item => item === originalValue);
  myList[index] = newValue;
}

And then invoke the function, with the intended parameters e.g.

updateList('item 2', 'item 406');

To change ‘item 2’ to ‘item 406’

you probably also want to include a check to make sure the item to change actually exists, to avoid any potential issues… such as:

function updateList(originalValue, newValue) {
  let index = myList.findIndex(item => item === originalValue);
  if (index >= 0) {
    myList[index] = newValue;
  } else {
    console.log(`Item ${originalValue} not found`);
  }
}

bubble.trouble · 2024-12-17T14:22:09.474Z

This kind of “programming” is really not the best way. If it works for your scenario that is great. But just for future travelers, findIndex will only return the first found item. If your list can contain duplicate values (e.g. 123, 234,345, 123,457), and the user tried to replace the second “123” in this scenario, the first 123 would actually be replaced and the second would be left as is.

Based on the fact that the OP has a list of ID’s I would assume these will all be unique, but what if the user accidentally types 123 twice not realizing it and then tries to correct it later? It could lead to a confusing experience.

boston85719 · 2024-12-17T14:28:39.350Z

bubble.trouble:

If your list can contain duplicate values

If you use a field that is a list in bubble it is not possible to have duplicates

bubble.trouble:

what if the user accidentally types 123 twice not realizing it and then tries to correct it later? It could lead to a confusing experience.

In my setup, the user is able to see all the IDs they have recently added and are already stored in the database, in the event an existing item in the list is the same as a newly added item (added not to db but in the RG) they see both and can alter it if they spot it, but since it saves to a field, the duplicate doesn’t actually create a duplicate.

BTW, @bubble.trouble do you have an alternative approach that also works, that doesn’t require ‘programming’…so far best solution in this thread is from @ihsanzainal84 with the use of the regex expression, and I personally plan to return to this thread to utilize that approach in the future if I need the functionality again. But at the end of the day, the more workable solutions there are, the better as some may be better suited for different use cases.

adamhholmes · 2024-12-17T14:42:43.818Z

bubble.trouble:

This kind of “programming” is really not the best way.

I’m not sure what that’s supposed to mean,…

And you haven’t offered any ‘better’ solution here…

findIndex() returns the index of the first item matching the condition - which is EXACTLY what’s needed here.

why would there be more than one item in the list with the same ID (although, personally I always use object arrays for this, not strings) - and what would the intended behaviour be if there were duplicate IDs in the list?

In any case, that’s an entirely different question - but obviously if you need to change Multiple items then a different method needs to be used.

If you do this right, in my opinion/experience it really is the best way to do it (much simpler, cleaner, and more efficient than any alternatives I’ve seen or tried).

But I’d be interested to hear your ‘better’ way…

bubble.trouble · 2024-12-17T14:49:14.554Z

@adamhholmes as I said if this works for the use case then that is great. The only point I was trying to make is that having a production app rely on string value replacement when you can’t be certain that the end user input is sanitized for unique values (which I didn’t see that happening or described in the OP’s example) is problematic.

So you implement this solution and then all of the sudden unexpectedly the user happens to accidentally enter in duplicate ID’s and you have a strange bug being reported and a bad user experience.

There is nothing wrong with the code you provided to complete the task suggested as long as the OP (and any future reader) understands that there are scenarios in which it will fail. Consequently, to use this approach successfully, the input should really be sanitized to ensure no duplicate values can be input by the user.

What I meant by This kind of “programming” is simply that it is a bad idea to just go about trying to replace values in a string list unless you are certain the list contains only unique values. Which, btw is probably one of the reasons why Bubble only allows unique values in their lists (so as to not run into these sort of confusing scenarios).

Edit: And I didn’t test it but I’m quite certain this is going to be the same issue for the Regex scenario. It will replace the first instance or all instances, either of which is probably not the behavior the end user would be expecting.

adamhholmes · 2024-12-17T14:56:58.035Z

Ok that’s a fair point and, actually, I hadn’t noticed that the original post use-case was using User-input values here…

(as I said, whenever I use this, or similar, I always use object arrays, and ensure each object has a unique ID property, to avoid such issues).

But as the use-case here involves texts entered directly by the User then yes, any solution will need to ensure each text item is unique (or include some other way to deal with duplicate items).