CODEWITHSUNDEEP
jqueryasp.net-mvcjsonserialization
Null Reference
Null Reference

Reputation: 11340

Converting serialized form's data to json object

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

Upvotes: 34

Views: 115900

Answers (7)

Brandon Anthony
Brandon Anthony

Reputation: 21

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);

Upvotes: 2

Moh .S
Moh .S

Reputation: 2090

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);

Upvotes: 11

Willian Ray
Willian Ray

Reputation: 31

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);

Upvotes: 3

synthet1c
synthet1c

Reputation: 6282

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')
)

Upvotes: 2

Raphael Monteiro Nunes
Raphael Monteiro Nunes

Reputation: 61

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

Upvotes: 2

BITS_Python
BITS_Python

Reputation: 381

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);

Upvotes: 24

Hitesh Siddhapura
Hitesh Siddhapura

Reputation: 1392

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

Upvotes: 47

Related Questions