时间戳

首页 > 解决方案 > 如何按日期在 JSON 对象中添加动态创建的输入值？

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

问题描述

我正在制作一个活动预订系统，我正在尝试动态添加输入元素并将它们的值添加到 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）的输入字段中获取值，并使用从上面输入中获取的默认值来创建新字段。
我正在努力做到这一点，以便当我选择某个日期并且可以在单个 eventDate 上使用多个（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
    }]
}]

标签： javascriptjqueryhtmlarraysjson

解决方案

在下面试试这个：

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

推荐阅读