Conversione dei dati del form serializzato oggetto JSON

Question

Ho un cshtml come il seguente

@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"))    
} 

Nel mio javascript (in un file JavaScript separato), sto cercando di serializzare questo modulo e convertirlo in un oggetto JSON .

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

stampe fuori

FloorPlan.Name=Test&FloorPlan.GroupId=15 

E

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

mi dà:

Ho provato a fare questo

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

ma ottengo questo errore:

Uncaught SyntaxError: Unexpected token o 

Answer 1

Modificare l'istruzione

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

con

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

o

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

Answer 2

Usa il codice qui sotto !!!

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

Answer 3

È possibile utilizzare: jquery.serializeToJSON - https://github.com/raphaelm22/jquery.serializeToJSON La sua è pronto a lavorare con i moduli ASP MVC

Answer 4

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

return jsonObj; 
} 

Usare questa funzione. Funzionerà solo con jquery.

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

var properJsonObj = jQFormSerializeArrToJson(serializedArr); 

Answer 5

Una interpretazione moderna. babel fase-2 preset è richiesto per compilare l'oggetto operatore diffusione

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

Answer 6

È possibile utilizzare questo per fare un json con tutti i campi di modulo.

Jquery esempio:

$('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; 
}); 

puro JavaScript con 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);