表数据到JSON字符串

Question

我有一个带有输入的表，我需要将它正确地转换为每行的json数组。示例：

Id    Name     Gender
1     John     Male
2     Rose     Female

Desired output:
[
  { Id:1, Name: "John", Gender: "Male" },
  { Id:2, Name: "Rose", Gender: "Female" }
]

请帮帮我。我使用这个代码

JSON.stringify($('#myform').serializeArray());

但是它给了我这个输出：

[
  {\"name\":\"Id\",\"value\":\"1\"},
  {\"name\":\"Name\",\"value\":\"John\"},
  {\"name\":\"Gender\",\"value\":\"Male\"}
]

在行动中看到它：https://jsfiddle.net/srssnzj8/2/

Answer 1

要满足您的需要，您可以使用map()在每个tr中创建一个input和select元素值的数组。试试这个：

​

$(document).on('click', '#save', function(event) {
    event.preventDefault();
    var data = $('tr').map(function() {
    	var obj = {};
    	$(this).find('input, select').each(function() {
        	obj[this.name] = $(this).val();
        });
        return obj;
    }).get();
    
    console.log(JSON.stringify(data));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form method="post" action="#" id="myForm">
    <table>
        <tr>
            <td>
                <span>1</span>
                <input type="hidden" name="Id" value="1" />
            </td>
            <td>
                <input type="text" name="Name" value="John" />
            </td>
            <td>
                <select class="form-control" name="Gender">
                    <option value="Male" selected>Male</option>
                    <option value="Female">Female</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <span>2</span>
                <input type="hidden" name="Id" value="2" />
            </td>
            <td>
                <input type="text" name="Name" value="Rose" />
            </td>
            <td>
                <select class="form-control" name="Gender">
                    <option value="Male">Male</option>
                    <option value="Female" selected>Female</option>
                </select>
            </td>
        </tr>
    </table>
    <button type="submit" id="save">
        Submit
    </button>
</form>

​

Answer 2

基本上你必须

• 使用$("tbody tr").each(...迭代所有行
• 使用$(this).find("td");获取所有行的单元格
• 使用$cells.each(...遍历所有单元格，并使用$(this).find("input").val()来获得文本。
• 将它们存储在数组中，只需为其调用JSON.stringify

还稍微修改了html，添加了thead、tbody和th，请参阅更新的jsFiddle。

Answer 3

您必须遍历每一行，并对行映射名称上的每个输入值进行迭代。

function getFormData(){
  var rowData = [];
  $("tr").each(function() {
    var unindexed_array= jQuery(this).find("input, select").serializeArray();
    var obj= {};
    jQuery(unindexed_array).each(function(){
       obj[this.name] = this.value;
    });
     rowData .push(obj);
});    
   return rowData ;
}