FORM.IO - Render/Re-build from a variable - formio

Question

I'm doing some tests with https://unpkg.com/formiojs#latest/dist/formio.full.min.js
I was able to integrate the constructor in my application and save the generated JSON in a table.
Now I want to bring that JSON and be able to edit or render the form but I'm not doing something right.
This is my code:
window.onload = function () {
var jsonForm1 = document.getElementById ("value_forn_1"). value;
console.log (jsonForm1);
var builder = new Formio.builder (document.getElementById ("edit"), jsonForm1, {});
builder.then (function (form) {
form.on ("change", function (e) {
console.log ("builder");
var jsonSchema = JSON.stringify (form.schema, null, 4);
console.log (jsonSchema);
$ ("# value_forn_1"). val (jsonSchema);
});
});
};
value_forn_1 is the textarea containing the JSON retrieved from my table
the console.log (jsonForm1) shows me the JSON of the textarea by console
But if I want to pass the variable jsonForm1 from inside Formio.builder, I get the error:
Uncaught TypeError: Cannot read properties of null (reading '1')
4)On the other hand, if I directly assign the JSON to jsonForm1:
var jsonForm1 = { "components": [ { "label": "Text Field", "tableView": true, "key": "textField", "type": "textfield", "input": true }, { "label": "Text Area", "autoExpand": false, "tableView": true, "key": "textArea", "type": "textarea", "input": true } ] };
The rendering works ....
What am I doing wrong?

Answer 1

I think you already answered your own question but the schema in the jsonForm1 variable should be parsed into a JSON object to be passed into the Formio.builder function.
var jsonForm1 = JSON.parse(document.getElementById ("value_forn_1").value);
Additionally you can check out their sandbox. It's been very helpful working with the js library.
Sandbox:
https://formio.github.io/formio.js/app/sandbox
Code behind the sandbox (see initRenderer function):
https://github.com/formio/formio.js/blob/master/app/sandbox.html