javascript - 从表单输入生成对象

Question

这是我的代码:

<form class="form-group" id="formAdd">
        <table class="table table-striped table-condensed table-bordered table-overflow">
            <thead>
                <tr>
                    <th style="text-align:center" width="33%">Track</th>
                    <th style="text-align:center" width="33%">Category</th>
                    <th style="text-align:center" width="33%">Skills</th>
                </tr>
            </thead>
            <tbody id="categoryContainer">
                <tr>
                    <td id="trackContainer" rowspan="1" width="33%">
                        <input type="text" class="form-control" style="max-width: none;" name="track" ng-model="addTCS.track" />
                    </td>
                    <td colspan="2">
                        <table class="borderless" style="width: 100%;">
                            <tbody>
                                <tr>
                                    <td width="50%" style="padding:0 8px 0 0;vertical-align:top;position:relative;">
                                        <div class="form-group">
                                            <input type="text" class="form-control category" style="max-width: none;" name="category[0]" id="category[0]" data-category-index="0"/>
                                        </div>
                                        <small style="position:absolute;bottom:0;right:8px;"><a href="" class="text-primary pull-right category-add" ng-click="addTCS.addCategory($event)">+ Add Category</a></small>
                                    </td>
                                    <td width="50%" style="padding:0 0 0 8px;vertical-align:top;">
                                        <div class="skillContainer">
                                            <div class="form-group">
                                                <input type="text" class="form-control skill" style="max-width: none;" name="category[0].skill[0]" id="category[0].skill[0]" data-category-index="0" data-skill-index="0"/>
                                            </div>
                                        </div>
                                        <small><a href="" class="text-primary pull-right" ng-click="addTCS.addSkill($event)">+ Add Skill</a></small>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3"><cite>Note: All text fields are required.</cite></td>
                </tr>
            </tfoot>
        </table>
        <div class="form-group text-center">
            <button class="btn btn-primary btn-md" type="button" ng-click="addTCS.cancel()">Cancel</button>
            <button class="btn btn-success btn-md" type="button" ng-click="addTCS.submit()" ng-disabled="addTCS.formAdd.$invalid">Submit</button>
        </div>
    </form>

HTML 输出的示例屏幕截图

现在我想为以下输出创建一个对象。 Track 只有一个，但一个 Track 可以有多个 Category，每个 Category 可以有多个 Skills。

我想输出像这样的对象

Object >
    track: "track1",
    category :{
       category1: {
           0: "skill1 for category1"
           1: "skill2 for category1"
       },
       category2: {
           0: "skill1 for category2"
           1: "skill2 for category2"
           2: "skill3 for category2"
       }
    }

注意:我添加 data-category-index 表示该类别所在的行，并添加 data-skill-index 表示该类别中的技能数量

Answer 1

找到答案了。我希望这也能对某人有所帮助

vm.submit = function () {
    var tcs = {};
    var category = {};

    var cIndexPrev;
    var categoryTemp;
    var skills = [];
    var element = document.querySelectorAll("#formAdd input");
    element.forEach(function (elem) {
        var categoryIndex = elem.dataset.categoryIndex;
        var skillIndex = elem.dataset.skillIndex;

        if (categoryIndex == undefined && skillIndex == undefined) {
            tcs["track"] = elem.value;
        } else if (categoryIndex != undefined && skillIndex == undefined) {
            if (cIndexPrev == undefined) {
                cIndexPrev = categoryIndex;
            } else if (cIndexPrev !== categoryIndex) {
                category[categoryTemp] = { skills: skills };
                cIndexPrev = categoryIndex;
                skills = [];
            }
            categoryTemp = elem.value;
        } else if (categoryIndex != undefined && skillIndex != undefined) {
            skills.push(elem.value);
        }
    });
    if (skills.length > 0) {
        category[categoryTemp] = { skills: skills };
    }
    tcs["category"] = category;
};