dsla94915
2018-07-06 02:47
浏览 72
已采纳

格式化表格形式的序列化数据并选择数据

I'm trying to send ajax post data from a webpage where the data is grabbed from a form consisting of a table, a date selection box and a comment text box. This particular part of the website however isn't static and therefore this webpage is built in a php file on a GET request and returned in base64 to be decoded and added to the site.

The ajax on the 'main' page is:

$.ajax({
  type: "GET",
  url: 'backend/ajax/webpage.php',
  dataType: 'text',
  data: {
    message: 'UPDATE_WEBPAGE'
  },
  success: function(result) {
    $('#main-content').html(window.atob(result));
  },
  error: function(error) {}
});

This will return with a lengthy table although i have minimized it below.

    <div class="section__content section__content--p30">
    <div class="container-fluid" id="content">
        <div class="col-md-12">
            <div class="overview-wrap">
                <h2 class="title-1">Rosters</h2>
            </div>
            </br>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card" style="border-radius: 10px;">
                    <div class="card-header">
                        <strong class="card-title">Roster for week starting:<span class="input-group date" style="width: 20%;" id="date" data-target-input="nearest">
                        <input id="date-input" type="text" placeholder="Week starting" class="form-control datetimepicker-input" data-target="#date"/>
                            <span class="input-group-append" data-target="#date" data-toggle="datetimepicker">
                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                </span>
                            </span>
                        </strong>
                        <script>
                            $(function() {
                                $("#date").datetimepicker({
                                    format: 'D/M/YYYY',
                                    daysOfWeekDisabled: [0, 6]
                                });
                            });
                        </script>
                    </div>
                    <div class="card-body">
                        <form id="roster-form" action="">
                            <div class="form-group table-responsive table--no-card m-b-30">
                                <table id="roster" for="roster-form" class="table table-borderless table-earning" align="left">
                                    <thead align="left">
                                        <tr>
                                            <th>Name</th>
                                            <th>Monday</th>
                                            <th>Tuesday</th>
                                            <th>Wednesday</th>
                                            <th>Thursday</th>
                                            <th>Friday</th>
                                            <th>Saturday</th>
                                            <th>Sunday</th>
                                        </tr>
                                    </thead>
                                    <tbody align="left">
                                        <th id="$days[$day]" name="$days[$day]">
                                            <div class="rs-select2--trans rs-select2--md" style="background-color: transparent;">
                                                <select value="$name" name="$namestart" class="js-select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true" style="background-color: transparent;max-width:5%;">
                                                    <option selected="selected" value="$pstime">$pstime</option>
                                                    ";
                                                    <option value="05:00 am">05:00 am</option>
                                                    <option value="05:30 am">05:30 am</option>
                                                    <option value="05:45 am">05:45 am</option>
                                                    <option value="06:00 am">06:00 am</option>
                                                    <option value="06:15 am">06:15 am</option>
                                                    <option value="06:30 am">06:30 am</option>
                                                    <option value="06:45 am">06:45 am</option>
                                                    <option value="07:00 am">07:00 am</option>
                                                    <option value="07:15 am">07:15 am</option>
                                                    <option value="07:30 am">07:30 am</option>
                                                    <option value="07:45 am">07:45 am</option>
                                                    <option value="08:00 am">08:00 am</option>
                                                    <option value="08:15 am">08:15 am</option>
                                                    <option value="08:30 am">08:30 am</option>
                                                    <option value="08:45 am">08:45 am</option>
                                                    <option value="09:00 am">09:00 am</option>
                                                    <option value="09:15 am">09:15 am</option>
                                                    <option value="09:30 am">09:30 am</option>
                                                    <option value="09:45 am">09:45 am</option>
                                                    <option value="10:00 am">10:00 am</option>
                                                    <option value="10:15 am">10:15 am</option>
                                                    <option value="10:30 am">10:30 am</option>
                                                    <option value="10:45 am">10:45 am</option>
                                                    <option value="11:00 am">11:00 am</option>
                                                    <option value="11:15 am">11:15 am</option>
                                                    <option value="11:30 am">11:30 am</option>
                                                    <option value="11:45 am">11:45 am</option>
                                                    <option value="12:00 pm">12:00 pm</option>
                                                    <option value="12:15 pm">12:15 pm</option>
                                                    <option value="12:30 pm">12:30 pm</option>
                                                    <option value="12:45 pm">12:45 pm</option>
                                                    <option value="1:00 pm">1:00 pm</option>
                                                    <option value="1:15 pm">1:15 pm</option>
                                                    <option value="1:30 pm">1:30 pm</option>
                                                    <option value="1:45 pm">1:45 pm</option>
                                                    <option value="2:00 pm">2:00 pm</option>
                                                    <option value="2:15 pm">2:15 pm</option>
                                                    <option value="2:30 pm">2:30 pm</option>
                                                    <option value="2:45 pm">2:45 pm</option>
                                                    <option value="3:00 pm">3:00 pm</option>
                                                    <option value="3:15 pm">3:15 pm</option>
                                                    <option value="3:30 pm">3:30 pm</option>
                                                    <option value="3:45 pm">3:45 pm</option>
                                                    <option value="4:00 pm">4:00 pm</option>
                                                    <option value="Close">Close</option>
                                                </select>
                                            </div>
                                            <div class="rs-select2--trans rs-select2--md" style="background-color: transparent;>
                                            <select value=" $name " name="$namefinish " class="js-select2 select2-hidden-accessible " style="background-color: transparent;max-width:5%; ">
                                                <option value="$pftime ">$pftime</option>
                                                "; <option value="05:00 am">05:00 am</option>
                                                <option value="05:30 am">05:30 am</option>
                                                <option value="05:45 am">05:45 am</option>
                                                <option value="06:00 am">06:00 am</option>
                                                <option value="06:15 am">06:15 am</option>
                                                <option value="06:30 am">06:30 am</option>
                                                <option value="06:45 am">06:45 am</option>
                                                <option value="07:00 am">07:00 am</option>
                                                <option value="07:15 am">07:15 am</option>
                                                <option value="07:30 am">07:30 am</option>
                                                <option value="07:45 am">07:45 am</option>
                                                <option value="08:00 am">08:00 am</option>
                                                <option value="08:15 am">08:15 am</option>
                                                <option value="08:30 am">08:30 am</option>
                                                <option value="08:45 am">08:45 am</option>
                                                <option value="09:00 am">09:00 am</option>
                                                <option value="09:15 am">09:15 am</option>
                                                <option value="09:30 am">09:30 am</option>
                                                <option value="09:45 am">09:45 am</option>
                                                <option value="10:00 am">10:00 am</option>
                                                <option value="10:15 am">10:15 am</option>
                                                <option value="10:30 am">10:30 am</option>
                                                <option value="10:45 am">10:45 am</option>
                                                <option value="11:00 am">11:00 am</option>
                                                <option value="11:15 am">11:15 am</option>
                                                <option value="11:30 am">11:30 am</option>
                                                <option value="11:45 am">11:45 am</option>
                                                <option value="12:00 pm">12:00 pm</option>
                                                <option value="12:15 pm">12:15 pm</option>
                                                <option value="12:30 pm">12:30 pm</option>
                                                <option value="12:45 pm">12:45 pm</option>
                                                <option value="1:00 pm">1:00 pm</option>
                                                <option value="1:15 pm">1:15 pm</option>
                                                <option value="1:30 pm">1:30 pm</option>
                                                <option value="1:45 pm">1:45 pm</option>
                                                <option value="2:00 pm">2:00 pm</option>
                                                <option value="2:15 pm">2:15 pm</option>
                                                <option value="2:30 pm">2:30 pm</option>
                                                <option value="2:45 pm">2:45 pm</option>
                                                <option value="3:00 pm">3:00 pm</option>
                                                <option value="3:15 pm">3:15 pm</option>
                                                <option value="3:30 pm">3:30 pm</option>
                                                <option value="3:45 pm">3:45 pm</option>
                                                <option value="4:00 pm">4:00 pm</option>
                                                <option value="Close">Close</option>
                                                </select>
                                                <span class="dropdown-wrapper" style="background-color: transparent;" aria-hidden="true"></span>
                                            </div>
                                        </th>
                                    </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="card" style="border-radius: 10px;">
                                        <div class="card-header">
                                            <strong class="card-title">
                                                Comments
                                            </strong>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <textarea class="form-control" id="roster-comments" rows="4"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" form="roster-form" class="btn btn-primary btn-lg btn-block">Submit Roster</button>
                                    <a href="#" id="download">Download Roster</a></br>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $("#roster-form").submit(function(e) {
            e.preventDefault();
            var roster = {};
            var data = JSON.stringify($("#roster-form").serializeArray());
            //I understand this is where i need to loop through the data and create the json object to send to rostersfunc.php although I'm lost.
            $.ajax({
                type: 'POST',
                url: 'backend/ajax/rostersfunc.php',
                dataType: 'json',
                data: {
                    message: "UPDATE_ROSTER",
                    data: data
                },
                success: function(result) {},
                error: function() {}
            });
        });
        $(document).ready(function() {
            $('.js-select2').select2({
                minimumResultsForSearch: -1
            });
        });
    });
</script>

I believe i need to loop through either a serializeArray output of the form data or through a serialize output of the data and snip the day_name_start/finish into the 4 sections, day, name, start/finish & value although I'm failing to do so.

The current output goes like:

post data = [{
    "name": "monday_bob_start",
    "value": "x am/pm"
}, {
    "name": "monday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "tuesday_bob_start",
    "value": "x am/pm"
}, {
    "name": "tuesday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "wednesday_bob_start",
    "value": "x am/pm"
}, {
    "name": "wednesday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "thursday_bob_start",
    "value": "x am/pm"
}, {
    "name": "thursday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "friday_bob_start",
    "value": "x am/pm"
}, {
    "name": "friday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "saturday_bob_start",
    "value": "x am/pm"
}, {
    "name": "saturday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "sunday_bob_start",
    "value": "x am/pm"
}, {
    "name": "sunday_bob_finish",
    "value": "y am/pm"
}]

and i'm trying to achieve this:

roster = {
    "monday": {
        "bob": {
            "startTime": x,
            "finishTime": y
        }
    },
    "tuesday": {
        "bob": {
            "startTime": x,
            "finishTime": y
        }
    },
    "wednesday": {
        "bob": {
            "startTime": x,
            "finishTime": y
        }
    },
    "thursday": {
        "bob": {
            "startTime": x,
            "finishTime": y
        }
    },
    "friday": {
        "bob": {
            "startTime": x,
            "finishTime": y
        }
    },
    "saturday": {
        "bob": {
            "startTime": x,
            "finishTime": y
        }
    },
    "sunday": {
        "bob": {
            "startTime": x,
            "finishTime": y
        }
    }
}

</div>
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新

  • dream518518518 2018-07-08 12:11
    最佳回答
    • iterate over the elements in postData
    • split the name value by _ to get an array with the path inside the desired JSON
    • create this path in roster
    • assign the value to the given path in roster

        var roster = {};
        var postData = $("#roster-form").serializeArray();
        var len = postData.length, i, elem;
        for(i=0; i<len; i++)
        {
          var path = postData[i].name.split("_");
          elem = roster;
          while(path.length)
          {
            key = path.shift();
            if(path.length)
            {
              if(typeof elem[key] === "undefined") elem[key] = {};
              elem = elem[key];    
            }
          }
          elem[key] = postData[i].value;
        }

    </div>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题