forms - 如何使用从 form.io 的表单生成器中的 api 获取的值加载数据网格组件？

Question

我正在探索 form.io 的 from-builder。我想调用一个API来获取数据。此 API 响应将是一个对象数组，其中每个对象都有一些属性和键值对。

因此，在这里我想创建一个已在 form.io 的表单生成器中可用的数据网格组件，并且该数据网格组件的列已根据响应属性进行设置。

例如:如果 API 的响应是一个对象数组，并且每个对象如下所示:

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

对于这种 API 响应，我使用构建器中的 form.io 通过拖放创建了一个空的数据网格组件。它将如下所示:

我尝试在数据选项卡下的数据网格组件的自定义值javascript函数字段中加载数据，如下所示:

但是我不知道如何创建新行并将列值分配给从 api 返回的值？

我的预期输出可能如下所示:

请有人帮助我。

Answer 1

我通过以下代码片段实现了这一点。正如我所说，我在数据网格组件的客户默认值部分的 javascript 部分中使用了此代码片段，如下所示:

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();