I am exploring form.io's from-builder. I want to call an API for data. This API response will be an array of objects where each object will have some property and key-value pairs.
So, here I want to create a data-grid component already available in form.io's form builder and that data-grid component's columns have been set according to the response properties.
For example: if the response from API is an array of objects and each object looks like the below:
body : "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" ,
id : 1 ,
title : "sunt aut facere repellat provident occaecati excepturi optio reprehenderit" ,
userId : 1
For this kind of API response, I have created an empty data-grid component using form.io's from builder by drag and drop. It will look like below :
I have tried to load the data in custom values javascript function field of data-grid component which is under data tab as below :
But I don't know how to create new rows and assign the column values to the values returned from api?
My expected output may look like this :
Someone please help me in this.
I have achieved this with the following code snippet. As i said I have used this code snippet in the data-grid component's customer default value section's javascript portion as below: