javascript - 将 json 对象转换为表单序列化数据
问题描述
我有这个包含 HTML 的对象:
obj = {
amount: 0
apply_business_delivery: "<div class="form-check"><input type="checkbox" checked class="form-check-input" name="apply_business_delivery" id="apply_business_delivery"></div>"
apply_private_delivery: "<div class="form-check"><input type="checkbox" checked class="form-check-input" name="apply_private_delivery" id="apply_private_delivery"></div>"
bin: "<i class="far fa-trash-alt"></i>"
service: "E-mail advisering"
unit: "<div class="form-group"><select class="form-control form-control-sm select2" name="units" id="units"><option selected>Kr.</option><option >%</option></select></div>"
}
我可以以某种方式将这些值转换为表单序列化数据,以便更轻松地使用服务器端吗?例如复选框应该被转换成0
或者1
如果它被选中。
编辑:想要我想要的是具有相同的功能,例如$('form').serializeArray()
. 我只是在弄清楚如何在 obj 上执行此操作时遇到问题。
例如$('form').serializeArray()
转换这个 HTML:
<select class="form-control form-control-sm select2" name="company_name"
id="company_name">
<option>My company</option>
</select>
<select class="form-control form-control-sm select2" name="type"
id="type">
<option>Business</option>
</select>
对此:
"form" => array:2 [
0 => array:2 [
"name" => "company_name"
"value" => "My company"
]
1 => array:2 [
"name" => "type"
"value" => "Business"
]
]
这是我想要的结果:
obj = {
amount: 0
apply_business_delivery: [
"name" => "apply_business_delivery"
"value" => 1
]
apply_private_delivery: [
"name" => "apply_private_delivery"
"value" => 1
]
bin: ""
service: "E-mail advisering"
unit: [
"name" => "units"
"value" => "Kr."
]
}
解决方案
这似乎对我有用
var res = $.fn.agGridSerializeRowData( gridFeeOptions.rowData );
/**
*
* @param agGridOption
* @returns {[]}
*/
$.fn.agGridGetAllData = function (agGridOption) {
let rowData = [];
agGridOption.api.forEachNode(node => rowData.push(node.data));
return rowData;
}
/**
*
* @param rows
* @returns {[]}
*/
$.fn.agGridSerializeRowData = function (agGridOption) {
let allFormsData = [];
let rows = $.fn.agGridGetAllData(agGridOption);
$.each(rows, function (i, rowObjects) {
let obj = {};
$.each(rowObjects, function (i, e) {
if (/<\/?[a-z][\s\S]*>/i.test(e)) {
obj[i] = $.fn.agGridSerializeHtml(e);
} else {
obj[i] = e;
}
});
allFormsData.push(obj);
});
return allFormsData;
};
/**
*
* @param e
* @returns {{}}
*/
$.fn.agGridSerializeHtml = function( e ) {
e = e || '';
let allDataObject = {};
let allHtmlDataTemp = {};
if ( e !== '' ) {
$( e ).find( 'input,select,textarea' ).each( function( i ) {
allHtmlDataTemp[ i ] = $( this );
} );
} else {
$( 'input,select,textarea' ).each( function( i ) {
allHtmlDataTemp[ i ] = $( this );
} );
}
$.each( allHtmlDataTemp, function( i ) {
let $input = $( this );
let eName;
let eVal;
if ( ($input.attr( 'type' ) === 'submit') ||
($input.attr( 'type' ) === 'button') ) {
return true;
}
if ( ($input.attr( 'name' ) !== undefined) && ($input.attr( 'name' ) !== '') ) {
eName = $input.attr( 'name' ).trim();
} else if ( ($input.attr( 'id' ) !== undefined) && ($input.attr( 'id' ) !== '') ) {
eName = $input.attr( 'id' ).trim();
}
if ( $input.val() !== undefined ) {
if ( ($input.attr( 'type' ) === 'radio') || ($input.attr( 'type' ) === 'checkbox') ) {
eVal = $input.is(":checked");
} else {
eVal = $input.val();
}
} else if ( $input.text() !== undefined ) {
eVal = $input.text();
}
if ( eVal === undefined || eVal == null ) {
eVal = '';
}
if ( eName !== undefined ) {
let elementArr = [];
if ( eName.indexOf( ' ' ) !== -1 ) {
elementArr = eName.split( /(\s+)/ );
} else {
elementArr.push( eName );
}
$.each( elementArr, function( index, name ) {
name = name.trim();
if ( name !== '' ) {
allDataObject[ name ] = eVal;
}
} );
}
} );
return allDataObject;
};
推荐阅读
- sql-server - 在 SQL Server 中为年份和季度赋值
- r - R 不会运行模型,因为它坚持数据不是 UnmarkedFrame Occu 主题
- visual-studio-2017 - 如何避免在 Visual Studio 2017 15.9.13 中添加此或我的资格问题
- css - 我的本地 python 服务器不知道要运行的静态 css 文件
- python - 如何添加子文件夹
- image - 在 keras 中实现没有 textImagegenerator 的 CTC
- javascript - React 组件样式封装
- youtube-api - YouTube Reporting API 报告为空白
- kotlin - 在 kotlin 中哪个是静态的,哪个是单例的?
- sql - 将 nvarchar 列类型更改为 datetime