UI Builder Client Script - Setting State from Data Resource

[TFischer]

Hello,

Currently I am retrieving a data resource via REST API on page load and running a client script on success to format that data. My goal is to, once that data is formatted, to set it to a variable in the client state. 

Although I can console.log the data and see that it is formatting correctly, the property in the client state remains the default value.

Does something look incorrect with my syntax? Or am I misunderstanding how state is set?

UPDATE: I'm rendering this  on the page as elements in a repeater. After saving, I can see the correct amount of elements are rendering per items in the array, however the data is still not being reflected in the UI Builder interface. The client property still shows the default value.

function handler({
    api,
    event,
    helpers,
    imports
}) {

    const tasksData = api.data.get_task_context.output.result;

    const allTasks = [];

    for (let queryTasks in tasksData) {

        const tasks = tasksData[queryTasks].task_data;
        const taskKeys = Object.keys(tasks);

        taskKeys.forEach(taskKey => allTasks.push(tasks[taskKey]));

    }

    console.log(allTasks) //this value is correct

    api.setState('allTasks', allTasks); //this doesn't seem to be working...

}

[IronPotato]

Hi @TFischer ,

since the amount of components are rendering correctly your state seems to be ok. You most probably have incorrect paths to your data in components it self.

1. make sure that Repeater is consuming data from your state and it's 'Array';

2. change any attribute from config TAB to actual script and console.log(api.item) and observe the objects. Make sure that path that you are binding to your component are correct.

If my answer helped you in any way, please then mark it as helpful and correct. This will help others finding a solution.

[TFischer]

Hi @IronPotato 

I have the client state array bound to the repeater, though it shows empty. I wonder if this is because the UI is reflecting on page load rather than after the setState method is called?

Repeater Data Array

[IronPotato · Accepted solution]

this view is showing only "default states" that you set. As I mentioned before, if the count of compoents rendered matches the objects in your console logged allTasks array, that means that you have the data.

second step is to console.log(api.item) WITHIN the component via script. Choose any attribute on that component and switch to script a log that. You will see your data

[TFischer]

Sure enough! I did console.log(api.item) on an attribute of the component being repeated and it showed the value for the individual item.

Thanks @IronPotato