如何修复JSON对象的假数组?
16lz
2021-01-22
I am having trouble creating an object array in JSON. When I click the save button (#btnSave) that appears on JSON is the display as below. What I want is a form I created especially with a TAG4 name that has a div class name "toAdd" can be grouped as I want below. So how to fix it?
在JSON中创建对象数组有困难。当我点击JSON上的save按钮(#btnSave)时，显示如下所示。我想要的是我创建的一个表单，它的TAG4名称有一个div类名“toAdd”，可以按照我的意愿分组。那么如何修复呢?
My data :
我的数据:
{
"TAG1_ID": "1",
"TAG2_ID": "2",
"TAG3_ID": "3",
"TAG4_NAME": [
"Me",
"You"
],
"TAG4_AGE": [
"20",
"22",
"17",
"4"
],
"TAG4_JOB": [
"Police",
"Fireman",
"Student",
"Baby"
]
}
I want create like this :
我想这样创作:
{
"TAG1_ID": "1",
"TAG2_ID": "2",
"TAG3_ID": "3",
"temp": [
{
"TAG4_NAME": "Me",
"detail_temp": [
{
"TAG4_AGE": "20",
"TAG4_JOB": "Police"
},
{
"TAG4_AGE": "22",
"TAG4_JOB": "Fireman"
}
],
},
{
"TAG4_NAME": "You",
"detail_temp": [
{
"TAG4_AGE": "17",
"TAG4_JOB": "Student"
},
{
"TAG4_AGE": "4",
"TAG4_JOB": "Baby"
}
],
}
]
}
Javascript :
Javascript:
function saveForm(){
var array = [];
var object = {};
var serialArray = $('.ltktForm').serializeArray();
/* var serialArray = $('.ltktForm');
var data = JSON.stringify(serialArray.serializeArray()); */
$.each(serialArray, function(){
if(object[this.name]){
if(!object[this.name].push){
object[this.name] = [object[this.name]];
}
object[this.name].push(this.value || '');
}else{
object[this.name] = this.value || '';
}
});
return object;
}
$('#btnSave').on('click', function () {
var data = saveForm();
console.log(JSON.stringify(data));atas));
});
My form :
我的表格:
<form class="form form-horizontal myForm" novalidate method="POST">
<div class="tabNavigator">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a id="id1" href="#idOne" class="tab_trigger" aria-controls="home" role="tab" data-toggle="tab">ID_1</a>
</li>
<li role="presentation" class="active">
<a id="id2" href="#idTwo" class="tab_trigger" aria-controls="home" role="tab" data-toggle="tab">ID_2</a>
</li>
<li role="presentation" class="active">
<a id="id3" href="#idThree" class="tab_trigger" aria-controls="home" role="tab" data-toggle="tab">ID_3</a>
</li>
</ul><br>
<!-- I ID_1 I -->
<div class="tab-content">
<div role="tabpanel" class="tabcontent tab-pane active" id="idOne">
<fieldset>
<legend>ID_1</legend>
<div class="form-group ">
<label class="col-sm-2 control-label">Input ID 1</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="TAG1_ID" />
</div>
</div>
</fieldset>
</div>
<!-- II ID_2 II -->
<div role="tabpanel" class="tabcontent tab-pane active" id="idTwo">
<fieldset>
<legend>ID_2</legend>
<div class="form-group ">
<label class="col-sm-2 control-label">Input ID 2</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="TAG2_ID" />
</div>
</div>
</fieldset>
</div>
<!-- III ID_3 III -->
<div role="tabpanel" class="tabcontent tab-pane active" id="idThree">
<fieldset>
<legend>ID_3</legend>
<div class="form-group ">
<label class="col-sm-2 control-label">Input ID 3</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="TAG3_ID" />
</div>
</div>
</fieldset>
<div class="toAdd">
<fieldset>
<legend>Temp</legend>
<div class="form-group">
<label class="col-sm-2 control-label">Input Name</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="TAG4_NAME" />
</div>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label">Input Age</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="TAG4_AGE" />
</div>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label">Input Job</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="TAG4_JOB" />
</div>
</div>
</fieldset>
</div>
<button class="addForm btn btn-primary" type="button">+</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
var toAdd =
'<fieldset>'+
'<legend>Temp</legend>'+
'<div class="form-group">'+
'<label class="col-sm-2 control-label">Input Name</label>'+
'<div class="col-sm-9">'+
'<input class="form-control" type="text" name="TAG4_NAME" />'+
'</div>'+
'</div>'+
'<div class="form-group ">'+
'<label class="col-sm-2 control-label">Input Age</label>'+
'<div class="col-sm-9">'+
'<input class="form-control" type="text" name="TAG4_AGE" />'+
'</div>'+
'</div>'+
'<div class="form-group ">'+
'<label class="col-sm-2 control-label">Input Job</label>'+
'<div class="col-sm-9">'+
'<input class="form-control" type="text" name="TAG4_JOB" />'+
'</div>'+
'</div>'+
'</fieldset>';
$('.addForm').on('click', function(){
$(this).parent().find('div.toAdd').append(
toAdd
);
});
});
</script>
1 个解决方案
#1
1
You have to do a structure manually the array like:
你需要手动设置数组，比如:
$(function() {
var toAdd = '<fieldset>' + '<legend>Temp</legend>' + '<div class="form-group">' + '<label class="col-sm-2 control-label">Input Name</label>' + '<div class="col-sm-9">' + '<input class="form-control" type="text" name="TAG4_NAME" />' + '</div>' + '</div>' + '<div class="form-group ">' + '<label class="col-sm-2 control-label">Input Age</label>' + '<div class="col-sm-9">' + '<input class="form-control" type="text" name="TAG4_AGE" />' + '</div>' + '</div>' + '<div class="form-group ">' + '<label class="col-sm-2 control-label">Input Job</label>' + '<div class="col-sm-9">' + '<input class="form-control" type="text" name="TAG4_JOB" />' + '</div>' + '</div>' + '</fieldset>';
$('.addForm').on('click', function() {
$(this).parent().find('div.toAdd').append(toAdd);
});
$('#btnSave').on('click', function() {
var result = {};
//Get the value of tag1, tag2, tag3
result.TAG1_ID = $("input[name='TAG1_ID']").val();
result.TAG2_ID = $("input[name='TAG2_ID']").val();
result.TAG3_ID = $("input[name='TAG3_ID']").val();
//You can add more input tags here <--
var temp = {};
//Loop thru tag4 divs
//Loop thru fieldsets and get each value
$(".toAdd fieldset").each(function() {
var name = $(this).find("input[name='TAG4_NAME']").val();
var age = $(this).find("input[name='TAG4_AGE']").val();
var job = $(this).find("input[name='TAG4_JOB']").val();
temp[name] = temp[name] || {
TAG4_NAME: name,
detail_temp: []
}
temp[name]["detail_temp"].push({
TAG4_AGE: age,
TAG4_JOB: job
});
});
result.temp = Object.values(temp).map(v => v);
console.log(result);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form form-horizontal myForm" novalidate method="POST">
<div class="tabNavigator">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a id="id1" href="#idOne" class="tab_trigger" aria-controls="home" role="tab" data-toggle="tab">ID_1</a>
</li>
<li role="presentation" class="active">
<a id="id2" href="#idTwo" class="tab_trigger" aria-controls="home" role="tab" data-toggle="tab">ID_2</a>
</li>
<li role="presentation" class="active">
<a id="id3" href="#idThree" class="tab_trigger" aria-controls="home" role="tab" data-toggle="tab">ID_3</a>
</li>
</ul>
<br>
<!-- I ID_1 I -->
<div class="tab-content">
<div role="tabpanel" class="tabcontent tab-pane active" id="id1">
<fieldset>
<legend>ID_1</legend>
<div class="form-group ">
<label class="col-sm-2 control-label">Input ID 1</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="TAG1_ID" />
</div>
</div>
</fieldset>
</div>
<!-- II ID_2 II -->
<div role="tabpanel" class="tabcontent tab-pane active" id="id2">
<fieldset>
<legend>ID_2</legend>
<div class="form-group ">
<label class="col-sm-2 control-label">Input ID 2</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="TAG2_ID" />
</div>
</div>
</fieldset>
</div>
<!-- III ID_3 III -->
<div role="tabpanel" class="tabcontent tab-pane active" id="id3">
<fieldset>
<legend>ID_3</legend>
<div class="form-group ">
<label class="col-sm-2 control-label">Input ID 3</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="TAG3_ID" />
</div>
</div>
</fieldset>
<div class="toAdd">
<fieldset>
<legend>Temp</legend>
<div class="form-group">
<label class="col-sm-2 control-label">Input Name</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="TAG4_NAME" />
</div>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label">Input Age</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="TAG4_AGE" />
</div>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label">Input Job</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="TAG4_JOB" />
</div>
</div>
</fieldset>
</div>
<button class="addForm btn btn-primary" type="button">+</button>
<button class="btn btn-primary" type="button" id='btnSave'>SAVE</button>
</div>
</div>
</form>更多相关文章
- 如何从SQL SELECT查询中的c＃变量创建jQuery数组
- jquery.validate.js使用之自定义表单验证规则
- Asp。NET MVC Ajax-Post表单和Ajax-Get
- 导入地址簿联系人，存储在数组中并保存到数据库
- 解析jquery实现回车键提交表单
- JQUERY中做表单验证，谁有带时间的日期选择控件？
- 深入学习jQuery选择器系列第七篇——表单选择器
- jQuery Validate 表单验证插件
- 如何将表单转换成json通过AJAX传递？