如何按日期在JSON对象中添加动态创建的输入值

Question

我正在制作一个事件预订系统，并尝试动态添加输入元素，并在JSON对象上添加它们的值
这是我的代码(JQuery(：

$(".add_button").click(function(){
// Finding total number of elements added
var total_element = $(".element").length;
// last <div> with element class id
var lastid = $(".element:last").attr("id");
var split_id = lastid.split("_");
var nextindex = Number(split_id[1]) + 1;
let eventDate = $("#eventDate").val();
let ticketDetails = $("#ticketDetails").val();
let noTickets = $("#noTickets").val();
let ticketPrice = $("#ticketPrice").val();
var max = 20;
// Check total number elements
if(total_element < max ){
// Adding new div container after last occurance of element class
$(".element:last").after("<div class='element' id='div_"+ nextindex +"'></div>");
// Adding element to <div>
$("#div_" + nextindex).append(`
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-calendar-alt"></i>
</span>
</div>
<input type="text" name="eventDate" value="${eventDate}" class="form-control float-right reservation">
<input type="text" name="ticketDetails" value="${ticketDetails}" placeholder="Ticket Details" class="form-control float-right">
<input type="number" name="noTickets" value=${noTickets} placeholder="No. of tickets" class="form-control float-right">
<input type="number" name="ticketPrice" value=${ticketPrice} placeholder="Price" class="form-control float-right" id='txt_${nextindex}'>
&nbsp;<span id='remove_${nextindex}' class='remove btn btn-danger'>X</span>
</div><br>`);
}
});

// Remove element
$('.myList').on('click','.remove',function(){
var id = this.id;
var split_id = id.split("_");
var deleteindex = split_id[1];
// Remove <div> with id
$("#div_" + deleteindex).remove();
});

这是HTML代码：

<div class="form-group">
<label>Event Days</label>
<!--Some New Fields-->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-calendar-alt"></i>
</span>
</div>
<input type="text" class="form-control float-right reservation" id="eventDate">
</div>
<div class="input-group">
<input type="text" placeholder="Ticket Details" class="form-control float-right" id="ticketDetails">
</div>
<div class="input-group">
<input type="number" placeholder="No. of tickets" class="form-control float-right" id="noTickets">
</div>
<div class="input-group">
<input type="number" placeholder="Price" class="form-control float-right" id="ticketPrice">
</div>
<!--Some more new Fields-->
<!-- /.input group -->
<br>
<input type="button" class="btn btn-success btn-block add_button" value="Add New Day">
</div>

我正在做的是，我从ID为(eventDate、ticketDetails、noTickets和ticketPrice(的输入字段中获取值，并使用该值创建新字段，方法是将从上面的输入中获取的值作为默认值
我正在努力使其成为这样，当我选择某个日期时，可以在单个事件日期上有多个(ticketDetails、noTickets和ticketPrice(。

我想要的是这样的东西，

days:[{
day: eventDate,
typesOfTickets: [{
ticketDetails: ticketDetails,
noTickets: noTickets,
ticketPrice: ticketPrice
}]
}]

这样，如果同一天有多种类型的票，如成人、儿童和学生等，可以在同一天的typesOfTickets数组中正确分配。所以它可能看起来像这个例子，

days:[
{
day: "12-12-2020",
typesOfTickets: [{
ticketDetails: "Adult Ticket",
noTickets: 200,
ticketPrice: 15
},
{
ticketDetails: "Children Tickets",
noTickets: 50,
ticketPrice: 10
}]
},
{
day: "20-12-2020",
typesOfTickets: [{
ticketDetails: "Student Ticket",
noTickets: 100,
ticketPrice: 18
}]
}]

Answer 1

试试下面的方法：

let day_obj = {};
let day_exists = false;
day_obj['typesOfTickets'] = [];
days.map(function (item) {
if (item.day == day) {
day_exists = true;        
item.typesOfTickets.push({
ticketDetails: ticketDetails,
noTickets: noTickets,
ticketPrice: ticketPrice
});
}
});
if(!day_exists){
day_obj['day'] = day;
day_obj['typesOfTickets'].push({
ticketDetails: ticketDetails,
noTickets: noTickets,
ticketPrice: ticketPrice
});
days.push(day_obj);
}