직렬화된 양식의 데이터를 json 개체로 변환하는 중

직렬화된 양식의 데이터를 json 개체로 변환하는 중

다음과 같은 cshtml이 있습니다.

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

저의 javascript(별도의 javascript 파일)에서 이 폼을 serialize하여 JSON 오브젝트로 변환하려고 합니다.

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

출력하다

FloorPlan.Name=Test&FloorPlan.GroupId=15 

그리고.

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

다음과 같은 정보를 얻을 수 있습니다.

나는 이것을 시도했다.

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

하지만 다음 오류가 발생합니다.

Uncaught SyntaxError: Unexpected token o 

스테이트먼트를 변경하다

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

와 함께

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

또는

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

아래 코드를 사용하세요!!!

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

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

 return jsonObj;
}

이 기능을 사용합니다.이 작업은 jquery에서만 작동합니다.

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

var properJsonObj = jQFormSerializeArrToJson(serializedArr);

모든 형식의 필드를 사용하여 json을 만들 수 있습니다.

Jquery의 예:

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

FormData를 사용한 순수 JavaScript:

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

jquery.serialize 를 사용할 수 있습니다.ToJSON - https://github.com/raphaelm22/jquery.serializeToJSON ASP MVC 폼을 사용할 준비가 되었습니다.

현대적인 해석입니다. 객체 확산 연산자를 컴파일하려면 babel 2단계 사전 설정이 필요합니다.

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

다음 작업을 수행하여 직렬화 데이터를 json 개체로 변환할 수 있습니다. 이렇게 하면 필드 배열이 형식화되어 키와 값을 새 개체로 지정하는 작업이 반복됩니다.

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

언급URL : https://stackoverflow.com/questions/23287067/converting-serialized-forms-data-to-json-object