How do you change values of JSON object Client State Parameters in the UI builder?

[Joseph Testa]

I am trying to use a Client state parameter in the UI Builder to store multiple inputs (up to 24 different values). Usually for a String state parameter I would use api.setState("parameter_name","new value"); but I can't get this to work for a JSON object. For example if I try api.setState("json_object_name.variable1","new value"); then it does not change the value of the json_object_name.variable1 correctly and if it is changing it then it does not display on a data binded component.

[Brad Tilton]

If that doesn't work you may have to set the entire JSON object even if you're only updating one property. It's more scripting but should be doable.

[Joseph Testa]

UPDATE: See my response to Marc for a better solution.

Hi Brad thanks for the response and your videos have helped a lot. I tried something similar to what you suggested but did not have any success. It seems like the solution I wrote below was changing the value of my object's variable but if I bind the value to a stylized text then it only will change once from the first input text and won't work again until I refresh the page. The payload is a string from a text input.

var tempObject = api.state.myObject;

tempObject.inputValue = event.payload.input;

api.setState('myObject', tempObject);

A solution that I found that seems to work but I do not fully understand is shown below. Any idea why I would need to set the value of both the temporary object and set the state of my object parameter in this way? I'm guessing this is not the correct way to do this but it seems to work. I'm not actually using the tempObject anywhere but if I don't change that value then it doesn't work.

var tempObject = api.state.myObject;

tempObject.inputValue = event.payload.input;

api.setState('myObject.inputValue', event.payload.input);

[V_ Tran]

hmm this might work too. You'll save two lines of code:)

api.setState('myObject.inputValue', {...event.payload.input});

[Marc Mouries · Accepted solution]

I encountered this behavior. The solution is the following:

1. make a copy of the JSON state parameter

2. update the object properties in the copy.

3. set the value of the state parameter with the copy