How to load the data-grid component with the values obtained from an api in form.io's form-builder?

Question

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.

Answer 1

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:

var gridData = [];
function loadData() {
  var apiUrl = "https://jsonplaceholder.typicode.com/posts";
  fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
      data.forEach(function(row) {
        gridData.push({
          "id": row.id,
          "userId": row.userId,
          "title":row.title,
          "body": row.body
        });
      });
      return instance.setValue(gridData);
    })
}
loadData();