I'm building a form with form.builder
from a predefined list of components. What I'm trying to do is, after making a GET request that returns data, fill the columns of the form with the values of the request.
This is my code:
The function where I fill dataGrid
component
function fillDataGridWithResponseData(configurationComponents, data) {
const dataGridComponent = configurationComponents.components.find(component => component.key === 'dataGrid');
console.log('data' + JSON.stringify(data))
if (dataGridComponent) {
const dataGridRows = dataGridComponent.components || [];
const responseRows = data.dataGrid[0];
for (const key in responseRows) {
if (responseRows.hasOwnProperty(key)) {
const columnComponent = dataGridRows.find(component => component.key === key);
console.log('key: ' + JSON.stringify(key))
if (columnComponent) {
columnComponent.value = responseRows[key];
columnComponent.label = responseRows[key];
console.log('responseRows[key]: ' + JSON.stringify(responseRows[key]))
console.log('columnComponent: ' + JSON.stringify(columnComponent))
console.log('columnComponent.defaultValue : ' + JSON.stringify(columnComponent.defaultValue))
}
}
}
}
}
This is where I invoke that, in window.onload()
axios.get(`${baseURL}/${baseUserURL}/${idUser}`)
.then(function (response) {
const data = response.data.data;
console.log('data: ' + JSON.stringify(data));
Formio.builder(document.getElementById('builder'), configurationComponents)
.then(function (form) {
fillDataGridWithResponseData(configuracionComponentes, data);
form.render();
})
.catch(function (error) {
console.log('Error', error);
});
})
.catch(function (error) {
console.log('', error);
});
The format of JSON Response is similar that: 'data.dataGrid[]'
I don't understand why the values in the datagrid cells are not displayed. The render function is supposed to reload the form