Error "getData is not a function" when building form from existing data

Question

I'm currently working with form builder and am running into following error

fb.actions.getData is not a function

Whenever I'm initiating the form builder from existing form data and then trying to save the form again afterwards (e.g. after making changes to the form.)

This is the code I'm using to build the (multi-page) form.

$.get(reqURL, function(res) {
    if (res && JSON.parse(res).success) {
        // Parse the data to render.
        var formData = JSON.parse(res).data;
        var formContainer = document.getElementById('formBuilder');
        var $formContainer = $(formContainer);
        $.each(formData, function (idx, val) {
            var jsonString;
            if (typeof(val) !== 'string') {
                val = val.toString();
                val = '[' + val + ']';
            }
            var bIsArray = false;
            $.each(JSON.parse(val), function (sub_idx, sub_val) {
                if (sub_idx === 0) {
                    jsonString = JSON.stringify(sub_val);
                } else {
                    jsonString = jsonString + ',' + JSON.stringify(sub_val);
                    bIsArray = true;
                }
            });
            var jsonFormData = JSON.parse('[' + jsonString + ']');
            jsonFormData = JSON.stringify(jsonFormData);
            var formRenderOpts = {
                formData: jsonFormData,
                dataType: 'json'
            };


            var $addPageTab = $('#add-page-tab');
            var tabCount = document.getElementById("tabs").children.length,
            tabId = "page-" + tabCount.toString(),
            $newPageTemplate = $(document.getElementById("new-page")),
            $newPage = $newPageTemplate
            .clone()
            .attr("id", tabId)
            .addClass("fb-editor"),
            $newTab = $addPageTab
            .clone()
            .removeAttr("id"),
            $tabLink = $("a", $newTab)
            .attr("href", "#" + tabId)
            .text("Seite " + tabCount);
            var $newInstance = $newPage.formBuilder(formRenderOpts);
            $newInstance.promise.then(function() {
                fbInstances.push($newInstance);
                $newPage.insertBefore($newPageTemplate);
                $newTab.insertBefore($addPageTab);
                $fbPages.tabs("refresh");
                $fbPages.tabs("option", "active", tabCount - 1);
                console.log($newInstance); // Returns {actions: {…}, promise: Promise} for the first page with actions being undefined and {actions: {…}} with actions defined for page 2
            });             
        });

    }
});

And this is the code I'm using to save the form:

$(document.getElementById("save-all")).click(function () {  
    const allData = fbInstances.map(fb => {
      console.log(fb.actions.getData()); // This line is throwing the error
      return fb.formData;
    });

    saveFormData(allData);
});

I've read different threads claiming I had to use the .getData() part in comination with a promise, but I can't get it to work for some reason. Any help would be greatly appreciated.

Answer 1

The solution was editing a snippet of the first code block to the following:

var $newInstance = $newPage.formBuilder(formRenderOpts);
$newInstance.promise.then(function(instance) {
    fbInstances.push(instance);
    $newPage.insertBefore($newPageTemplate);
    $newTab.insertBefore($addPageTab);
    $fbPages.tabs("refresh");
    $fbPages.tabs("option", "active", tabCount - 1);
});

It wasn't adding the correct instance to the array.