将表格数据转换为JSON

Question

我正在尝试将HTML表格中的数据转换为JSON格式，以便可以在服务器端进行相应的处理。我能够序列化数据，但是结果最多只会生成不直接关联的独立数据数组。

像这样：

这是我正在使用的表单：

<form id="nameGenderForm">
    <table id="nameGenderTable">

        <tr>
            <th >Name</th>
            <th >Gender</th>
        </tr>


            <tr>
                <td><input type="text" name="studentName"></td>
                <td>
                    <select name="studentGender">
                        <option value="male">male</option>
                        <option value="female">female</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td><input type="text" name="studentName"></td>
                <td>
                    <select name="studentGender">
                        <option value="male">male</option>
                        <option value="female">female</option>
                    </select>
                </td>
            </tr>
        </table>
    <input type="submit" />
</form>

序列化数据的脚本如下：

$("#nameGenderForm").submit(function(event){
    event.preventDefault();

    var rawData=$('#nameGenderForm').serializeFormJSON();
    var formData=JSON.stringify(rawData);
    console.log(formData);
});

经过翻阅 StackOverFlow 几页之后，我得到了 serializeFormJSON() 函数：

(function($) {
$.fn.serializeFormJSON = function() {
var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};
})(jQuery);

通过使用这些，我能够获得如下JSON格式的数据：

{"studentName":["kenpachi","orihime"],"studentGender":["male","female"]}

我尝试了很多方法来将它们以姓名-性别的格式获取，但每种方法都得到了相同的结果。使用form for each也没有帮助。是否有什么方法可以像这样将数据获取为姓名-性别数组：

{"studentName":"kenpachi","studentGender":"male"},{"studentName":"orihime","studentGender":"female"}

请提供建议。

- Mono Jamoon

Answer 1

这里是演示，我稍微做了下面指出的一些修改：

遍历每个表格行，找到输入框、文本框和下拉框元素，将它们序列化，转换为对象，然后推入数组中。

    var o = [];
    $(this).find('tr').each(function() {
        var $this = $(this);
        var $elements = $this.find('input, textarea, select')
        if ($elements.size() > 0) {
            var serialized = $elements.serialize();
            var item = $.toDictionary( serialized );
            o.push(item);
        }
    });

顺便提一下，jQuery库现在新增了一个名为toDictionary的函数，请确保在您的代码中也包含它。

$.toDictionary函数

(function($) {
    $.extend({
        toDictionary: function(query) {
            var parms = {};
            var items = query.split("&"); // split
            for (var i = 0; i < items.length; i++) {
                var values = items[i].split("=");
                var key = decodeURIComponent(values.shift());
                var value = values.join("=")
                parms[key] = decodeURIComponent(value);
            }
            return (parms);
        }
    })
})(jQuery);

- Zain Shaikh

Answer 2

 function tableToArray(table) {
                    var headers = [];
                    var data = []; // first row needs to be headers var headers = []; 
                    for (var i = 0; i < table.rows[0].cells.length; i++) {
                        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
                    }
                    // go through cells 
                    for (var i = 1; i < table.rows.length; i++) {
                        var tableRow = table.rows[i]; var rowData = {};
                        for (var j = 0; j < tableRow.cells.length; j++) {
                            rowData[headers[j]] = tableRow.cells[j].innerHTML;
                        } data.push(rowData);
                    }
                    return data;
                }

                function tableToJson(table) {
                    var headers = [];
                    var data = '{[';
                    for (var i = 0; i < table.rows[0].cells.length; i++) {
                        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
                    }

                    for (var i = 1; i < table.rows.length; i++) {
                        var tableRow = table.rows[i]; var rowData = {};
                        for (var j = 0; j < tableRow.cells.length; j++) {
                            rowData[headers[j]] = tableRow.cells[j].innerHTML;
                        } data = (data + JSON.stringify(rowData) + ",");
                    }
                    return data.slice(0, -1) + "]}";
                }

- roshan siva

---

你好，Roshan，欢迎来到SO，感谢您尝试回答这个问题。您能否再详细解释一下您的解决方案？ - James Wong

当我们将值传递给tableToArray（$（＃exampletable））函数时，我们将获得一行数组，并需要使用JSON.stringify（output）将其转换为JSON字符串。在tableToJson（$（＃exampletable））中，我们将获得JSON字符串作为输出。 - roshan siva

Answer 3

将它们命名为同一个数组名称

例如：

name="first[studentName]" and name="first[studentGender]"

那么针对你的第二个输入

name="second[studentName]" and name="second[studentGender]"

另外，也许serializeArray会有帮助。

- VVV

---

嗨，谢谢您的回复。我只是举了两个条目作为例子。实际上，可能会更多。这种方法可行吗？ - Mono Jamoon

当然。这一切都归结于HTML。 - VVV

Answer 4

我会做类似于this jsFiddle的事情 - 也就是，循环遍历每一行并收集输入框中的数据，然后将每个对象推入结果数组。

你可能想要在输入框上使用一个class，因为这比通过目前相当繁琐的:input[name=xyz]选择器查找要快。

- AKX