API: Creating submission using javascript shows [object Object] for grouped fields like Full Name and Address

  • Tentrr
    Asked on August 5, 2019 at 6:22 PM

    Hey guys,

    I'm working with the JS SDK and am trying to submit responses. I've read over the documentation(https://api.jotform.com/docs/#post-submission-id) but I seem to be missing something.

     

    I'm able to submit all my answers without issue except for multi field components (e.g. control_address and control_fullname). Would you be able to provide a sample JSON for the submission I would provide to the `createFormSubmission` method please? The API doesn't seem to accept objects, only arrays and strings, but I cannot find the correct key structure for the submision for the API to pick up the various fields. 

     

    Thank you, 

    Nick

     

    EDIT:

    My submissions are successful, but the address and name fields are either empty when viewing submissions, or only one of the fields is captured (this only happens with the fullname component). 

    I'm looking for the correct structure of what my submission should be if I have: 
    qid of 260
    name of whereIs
    with the fields: addr_line1, addr_line2,  city, state, postal

     

    one more EDIT:

    For example, I've tried submitting various riffs on this structure: 

    1. 260[addr_line1]"sadf"
    2. 260[addr_line2]"asdff"
    3. 260[city]"asdf"
    4. 260[postal]"asdf"
    5. 260[state]"asdf"
  • Elton Support Team Lead
    Replied on August 5, 2019 at 8:36 PM

    The structure should be: submission[qid][arrayname]

    So for the first name;

    submission[qid][first]

    submission[qid][last]

    Example: submission[3][first]

    Same for your address field;

    submission[260][addr_line1]

    submission[260][addr_line2]

    submission[260][city]

    submission[260][state]

    submission[260][postal]

    submission[260][country]

    This should work.

  • Tentrr
    Replied on August 5, 2019 at 8:44 PM

    1565052175Screen Shot 2019 08 05 at 8 Screenshot 10

    Hey, thank you for the response. This is my submission object. Can you point out where I'm going wrong? 

  • Elton Support Team Lead
    Replied on August 5, 2019 at 10:32 PM

    Have you tried the 2nd element names with quotes?

    Example:

    254["first"]

    254["last"]

    That might work.

    You may also break it down by only submitting the name and see if that works.

    submission[254]["first"]

    submission[254]["last"]

  • Tentrr
    Replied on August 6, 2019 at 1:40 PM

    Hi! 

    Thanks for continuing to respond. Unfortunately, that didn't help either. I submitted the following structure: 
    1565112972Screen Shot 2019 08 06 at 1 Screenshot 10


    ... and got the following response from the server: "QuestionID not found on form questions!"

    This is the response I usually get when trying different patterns to get these form components to submit correctly. When I get a 200 back, when viewing submissions, the answers for these form components are either blank or [object Object].


    I've tried just submitting one key for these form components by running a JSON.stringify() on all the object, and that seems to display ok inside the console (albeit with quotation marks and curly braces surrounding everything), but when exporting to CSV or xlsx or PDF, the fields are blank. 


    Any more assistance with this would be great.. a JSON sample would be ideal. Thank you! 

  • Kiran Support Team Lead
    Replied on August 6, 2019 at 2:53 PM

    Could you check the sample output from the Get Submission and use the same format to send the submission using API?

    https://api.jotform.com/docs/#submission-id

    Please give it a try and let us know if you need any further assistance. We will be happy to help. 

  • Tentrr
    Replied on August 6, 2019 at 5:19 PM

    Hi Kiran, 

    Yes, I read the documentation. It's the same link in my first post. And i'm specifically asking about formatting of my submission to the API. Please take a look at the screenshots i posted above of a few of my submission attempts and provide a sample JSON or JS object illustrating the correct structure. That would be the most helpful I think. Thank you guys. 

  • Elton Support Team Lead
    Replied on August 6, 2019 at 6:32 PM

    We made some tests and it seems "submission" isn't necessary for JSON. Try it without the "submission" property and then format the fields with array values like the following.

    Example:

    {

    "254": {

    "first": "John",

    "last": "Doe"

    },

    "260": {

    "addr_line1": "My Street1",

    "addr_line2": "My Street2"

    }

    }

    This works for me:

    API: Creating submission using javascript shows [object Object] for grouped fields like Full Name and Address Image 1 Screenshot 30

    API: Creating submission using javascript shows [object Object] for grouped fields like Full Name and Address Image 2 Screenshot 41

     

  • Tentrr
    Replied on August 7, 2019 at 12:47 PM

    Thank you.. this is what I was looking for! However.. this is also what I originally had. I'm submitting this: 

    {253: ["Earning extra annual income"]

    254: {first: "asdf", last: "asdf"}

    255: 20

    258: ["VRBO"]

    260: {addr_line1: "sadf", addr_line2: "asdff", city: "asdf", state: "asdf", postal: "asdf"}

    261: "f"

    272: ["Beach"]

    277: "Yes"

    278: "Yes"

    283: "https://www.jotform.com/uploads/Tentrr/form_files/Onboarding-Plans2-fox2.5d408e5c3dbbe9.23722574.jpg"}


    Viewing this in the submissions, I see this:


    1565196378Screen Shot 2019 08 07 at 12 Screenshot 10


    Exporting this in any format yields blanks. Any ideas guys? 


    jotform.createFormSubmission(formID, submission, callback)
  • Elton Support Team Lead
    Replied on August 7, 2019 at 7:38 PM

    I was able to reproduce that problem.

    API: Creating submission using javascript shows [object Object] for grouped fields like Full Name and Address Image 1 Screenshot 20

    After checking the JotForm.js source code, I found out that the serialization of data does not support nested objects. I have addressed this to our developers for further investigation.

    For now, you can try this solution. It should work.

    Take the JotForm.js offline and then find and modify the serialize function.

    FROM:

        function serialize(data) {

              var str = [];

              for(var p in data)

                 str.push(encodeURIComponent(p) + "=" + encodeURIComponent(data[p]));

              return str.join("&");

        }

    TO:

    function serialize(data, prefix) {

      var str = [],

        p;

      for (p in data) {

        if (data.hasOwnProperty(p)) {

          var k = prefix ? prefix + "[" + p + "]" : p,

            v = data[p];

          str.push((v !== null && typeof v === "object") ?

            serialize(v, k) :

            encodeURIComponent(k) + "=" + encodeURIComponent(v));

        }

      }

      return str.join("&");

    }

     

    That should fix the problem. If in case you can't get the authentication to work, just use;

    JF.initialize( {apiKey: "YOUR API KEY HERE"} );

    Let us know how it goes. Thanks!

  • Tentrr
    Replied on August 13, 2019 at 12:47 PM

    Hi Elton, 

    Sorry for disappearing off the thread.. It was crunch time and I needed a solution so I came up with an alternative. Thank you for the code sample though.. I'm glad I wasn't going crazy. Hopefully this will make it in to your guys' next release! 

    Consider this one closed. :)