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.

[Joseph Testa]

Thank you Marc the key was to "copy" the json state parameter. Doing something like this shown below seems to be working for me. The only limitation I have found is if you are using the inputValue as a trigger for a data resource, then any time something within myObject is changed then it will think inputValue is also changing and trigger the data resource. A separate state parameter can be used for these cases.

var tempObject = Object.assign({}, api.state.myObject);

tempObject.inputValue = event.payload.input;

api.setState('myObject', tempObject);

[Community Alums]

Hi @Marc Mouries 

I created a JSON client state parameter   'details' 'JSON' {"name":'','age':''}. I'm trying to update the values name and age values from input fields. In the input valid set event, I added an event by selecting 'update client state parameter' and in the client state parameter drop down, I selected data binding option and added @state.details.name and in the value field @payload.value.

When I add input values to the field, as 'chaitanya'.  It should update the JSON object as {'name':'chaitanya','age':''}. But it is not updating the JSON. Can you know how to handle this??

[Joseph Testa]

See my reply to Marc for the best solution that I was able to find. You can make a script that is triggered to run the following. You will have to setup the event handler to add your payload when calling the script.

var tempObject = Object.assign({}, api.state.myObject);

tempObject.inputValue = event.payload.input;

api.setState('myObject', tempObject);

in your case it will look something like this:

var tempObject = Object.assign({}, api.state.details);

tempObject.name = event.payload.value;

api.setState('details', tempObject);