How to build JSON data in combination with form data

Question

Hi I need to build data in a JSON object and send through a ajax post, as a String.

I need to send something in the following format:

{
 "myRequest": {
     "myRequestType": "updateStatus",
     "fields": [
         {
             "item1": "data1",
             "item2": "data2",
             "item3": "data3",
             "formUpdateField": "data4"
         }
     ]
 }
}

I have a form table, which has a checkbox to select record(s) to send the update for. basically the send is to update a status of a record.

Based on the above, I have access to item1, item2 and item3 data - this is non form data. I need to add this to a JSON object. I think I can just about do this. But my problem is, I need to then add the data that I have from the form too, to this JSON Object.

I am able to get the data out of the form, but how to I add this to the JSON object I am building up?

The other issue is that, you can select multiple records from the form table

Any ideas how I can do this using JSON/jQuery etc?

You should handle an array until you are ready to send it. Then convert them to JSON before sending it — Nicolás Torres, Jul 01 '12 at 20:29
You definitely need to send everything as a string? Strange that the web server isn't merely expecting data to be sent more normally. — Mitya, Jul 01 '12 at 21:04

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

You could try using the serializeObject function in this question to retrieve the form data as an object. You could then add your non-form data to that object.

Perhaps something like the following:

var data = $('form').serializeObject();
data.item1 = 'data1';
data.item2 = 'data2';
data.item3 = 'data3';
myJson.myRequest.fields = [data];

edited May 23 '17 at 11:56

Community

1
1

answered Jul 01 '12 at 20:46

rexmac

1,584
10
14

score 0 · Accepted Answer · answered Jul 01 '12 at 21:03

Build your object as an object, then stringify it later. It's far harder to string-handle a JSON string together yourself than it is to stringify later.

If you're happy to support modern browsers only, you can take advantage of the native JSON.stringify() method that arrived in ECMA5. If not, there are plenty of third-party scripts that do the same thing.

Try this:

HTML (simple form)

<form id='myForm'>
    <input type='text' name='foo' />
    <input type='text' name='bar' />
    <input type='checkbox' name='foobar' />
    <input type='submit' value='go'>
</form>

JS

$(function() {

    //initialise object
    $('#myForm').on('submit', function() {
        var data = {
            myRequest: {
                myRequestType: 'updateStatus',
                fields: [{
                    item1: 'data1',
                    item2: 'data2',
                    item3: 'data3',
                    formUpdatedField: 'date4'
                }]
            }
        };

            //iterate over form fields and add each one in to our data
        $(this).find('input:not([type=submit]), select, textarea').each(function() {
            data.myRequest.fields[0][$(this).attr('name')] = $(this).val();
        });

            //do the request
        $.ajax({url: 'some/url.php', method: 'post', data: JSON.stringify(data)}).done(function() {
            //on success...
        });
        return false;
    });
});

That will iteratively append the fields and their values to your object, then stringify it when sending it as part of the AJAX request.

Finally, couldn't your fields definition be just an object, rather than an array whose existence is purely to house the inner object? Seems needless, but perhaps there's more to your data structure than you've shown.

How to build JSON data in combination with form data

2 Answers2