Converting serialized form's data to json object

Question

I have a cshtml like the following

@using (Html.BeginForm("Save", "Plans", FormMethod.Post, new { @class = "form-horizontal", id = "floorplan-form" }))
{
            @Html.TextBoxFor(m => m.FloorPlan.Name, new { placeholder = "Enter text", @class = "form-control" })

            @Html.DropDownListFor(m => m.FloorPlan.GroupId, new SelectList(Model.FloorPlanGroups, "Id", "Name"))             
}

In my javascript(in a separate javascript file), I'm trying to serialize this form and convert it into a JSON object.

var formData = $("#floorplan-form").serialize();
console.info(formData);

prints out

FloorPlan.Name=Test&FloorPlan.GroupId=15

And

var formData = $("#floorplan-form").serializeArray();
console.info(formData);

gives me:

Screen capture

I have tried doing this

var formData = JSON.parse($("#floorplan-form").serializeArray());

But I get this error:

Uncaught SyntaxError: Unexpected token o

Hitesh Siddhapura · Accepted Answer · 2014-04-25 08:08:56Z

47

Change your statement

var formData = JSON.parse($("#floorplan-form").serializeArray());

with

var formData = JSON.stringify(jQuery('#frm').serializeArray()); // store json string

or

var formData = JSON.parse(JSON.stringify(jQuery('#frm').serializeArray())) // store json object

answered Apr 25, 2014 at 8:08

Hitesh Siddhapura

1,40215 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bellash Over a year ago

Does one need to add a reference to an external file? is that JSON class included in jQuery ?

devius Over a year ago

Lol kids these days with their fancy jQuery... the JSON object is part of Javascript's built-in objects. Has nothing to do with jQuery.

V-SHY Over a year ago

To modify the formData of jquery file upload, I can only make it via third method, thanks

BITS_Python · Accepted Answer · 2015-03-08 12:28:19Z

24

Use the code below!!!

    var data = $("form").serialize().split("&");
    console.log(data);
    var obj={};
    for(var key in data)
    {
        console.log(data[key]);
        obj[data[key].split("=")[0]] = data[key].split("=")[1];
    }

    console.log(obj);

answered Mar 8, 2015 at 12:28

BITS_Python

3813 silver badges10 bronze badges

1 Comment

Altimus Prime Over a year ago

This is the right answer if you have a serialized string and want to convert it back to an object. It would be helpful to have a little more explanation rather than a code only answer.

Moh .S · Accepted Answer · 2018-01-18 12:21:49Z

11

function jQFormSerializeArrToJson(formSerializeArr){
 var jsonObj = {};
 jQuery.map( formSerializeArr, function( n, i ) {
     jsonObj[n.name] = n.value;
 });

 return jsonObj;
}

Use this function. This will work only with jquery.

var serializedArr = $("#floorplan-form").serializeArray();

var properJsonObj = jQFormSerializeArrToJson(serializedArr);

edited Jan 18, 2018 at 12:21

answered Jun 1, 2017 at 10:43

Moh .S

2,09022 silver badges20 bronze badges

1 Comment

Haritsinh Gohil Over a year ago

You can also use jQuery.each in place of jQuery.map

Willian Ray · Accepted Answer · 2017-10-14 21:44:21Z

3

You can use this for make a json with all fields of form.

Jquery example:

$('form').serializeArray().reduce(function(accumulator,currentValue, currentIndex){
    if(currentIndex === 1){
        var json = {};
        json[accumulator.name] = accumulator.value;
        return json;
    }
    accumulator[currentValue.name] = currentValue.value;
    return accumulator;
});

Pure JavaScript with FormData:

var formdata = new FormData(document.querySelector('form'));
var getJsonFromFormData = (formData) => {
    var json = {};    
    for (item of formData.keys()){
        json[item] = formData.get(item);
    }
     return json;
}
var json = getJsdonFromFormData(formdata);

edited Oct 14, 2017 at 21:44

answered Oct 14, 2017 at 21:23

Willian Ray

312 bronze badges

Comments

Raphael Monteiro Nunes · Accepted Answer · 2015-09-01 14:13:49Z

2

You can use: jquery.serializeToJSON - https://github.com/raphaelm22/jquery.serializeToJSON Its is prepared to work with forms ASP MVC

answered Sep 1, 2015 at 14:13

Raphael Monteiro Nunes

716 bronze badges

Comments

synthet1c · Accepted Answer · 2017-08-08 07:46:09Z

2

A modern interpretation. babel stage-2 preset is required to compile the object spread operator

// serializeToJSON :: String -> JSON
const serializeToJSON = str => 
  str.split('&')
    .map(x => x.split('='))
    .reduce((acc, [key, value]) => ({
      ...acc,
      [key]: isNaN(value) ? value : Number(value)
    }), {})

console.log(
  serializeToJSON('foo=1&bar=2&baz=three')
)

answered Aug 8, 2017 at 7:46

synthet1c

6,3024 gold badges28 silver badges41 bronze badges

Comments

Brandon Anthony · Accepted Answer · 2021-10-06 23:19:18Z

2

You could do the following to convert a serialize data to json object, this would take the array of fields in form and iterate over it asigning the keys and values to a new object.

let uncleandata = $(this).serializeArray();
let data = {};
uncleandata.forEach(item=>{
  data[item.name] = item.value;
});
console.log(data);

answered Oct 6, 2021 at 23:19

Brandon Anthony

212 bronze badges

1 Comment

Linux Torvalds Over a year ago

The best answer

Collectives™ on Stack Overflow

Converting serialized form's data to json object

7 Answers 7

3 Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related