如何从这个序列化结果到这个 JSON

Question

这段代码：

$(document).ready(function() {
     var table = $('#listtable').DataTable({
        columnDefs: [{
            orderable: false,
            targets: [1,2,3]
        }]
    });

    $('button').click( function() {      
          //var data_sent_to_server = JSON.stringify(table.$('input').serializeArray());
          var data_sent_to_server = JSON.stringify(table.$('input').serializeArray());
          // var data_sent_to_server = JSON.stringify(table.tableToJSON());

        $.ajax({ 
            type: "POST",  
            url: "<?php echo base_url('/material/FromMaterial/');?>",            
            data: data_sent_to_server,
            cache: false,
            success: function(data) { 
            console.log("Data sent to the server: \n\n "+data_sent_to_server);
            console.log("Data recieved from the server: \n\n "+data);
            },
            error: function() {
            console.log('Error....');
        }
        });
        //event.preventDefault;
        return false;        
    });
});`

结果如下：

[{"name":"MaterialId","value":"a0GC0000018TPfdMAG"},{"name":"Opportunity","value":"006C000000bpdl2IAA"},{"name":"TotalOrdered","value":"3"},{"name":"MaterialId","value":"a0GC0000014GyBSMA0"},{"name":"Opportunity","value":"006C000000bpdl2IAA"},{"name":"TotalOrdered","value":"0"},{"name":"MaterialId","value":"a0GC0000006v4ZaMAI"},{"name":"Opportunity","value":"006C000000bpdl2IAA"},{"name":"TotalOrdered","value":"0"},{"name":"MaterialId","value":"a0GC000000nl1UxMAI"},{"name":"Opportunity","value":"006C000000bpdl2IAA"},{"name":"TotalOrdered","value":"1"}]

但应该是这样的：

[ 
   { 
      "MaterialId":"a0GC0000018TPfdMAG",
      "Opportunity":"006C000000bpdl2IAA",
      "TotalOrdered":"3"
   },
   { 
      "MaterialId":"a0GC0000014GyBSMA0",
      "Opportunity":"006C000000bpdl2IAA",
      "TotalOrdered":"0"
   },
   { 
      "MaterialId":"a0GC0000006v4ZaMAI",
      "Opportunity":"006C000000bpdl2IAA",
      "TotalOrdered":"0"
   },
   { 
      "MaterialId":"a0GC000000nl1UxMAI",
      "Opportunity":"006C000000bpdl2IAA",
      "TotalOrdered":"1"
   }
]

这是 HTML 表格

<table id="listtable" class="table table-bordered table-striped table-hover" style="width:100%">
<thead>
 <tr>
    <th>Name</th>
    <th>Type</th>
    <th>Budgeted</th>
    <th>Total Ordered</th>
 </tr> 
</thead>
        <tr>
    <td>Black Can Liners 43" x 48</td>
    <td>Material</td>
    <td>3</td>
    <td>
        <input type="hidden" name="MaterialId"  value="a0GC0000018TPfdMAG"/>
        <input type="hidden" name="Opportunity" value="006C000000bpdl2IAA"/>
        <input type="number" name="TotalOrdered" value="0" pattern="[0-9]*"  min="0" max="3">
    </td>
    </tr>
          <tr>
    <td>Non-Acid Disinfectant - Per Gl</td>
    <td>Material</td>
    <td>2</td>
    <td>
        <input type="hidden" name="MaterialId"  value="a0GC0000014GyBSMA0"/>
        <input type="hidden" name="Opportunity" value="006C000000bpdl2IAA"/>
        <input type="number" name="TotalOrdered" value="0" pattern="[0-9]*"  min="0" max="2">
    </td>
    </tr>
          <tr>
    <td>Wet Mop-Blue</td>
    <td>Equipment</td>
    <td>1</td>
    <td>
        <input type="hidden" name="MaterialId"  value="a0GC0000006v4ZaMAI"/>
        <input type="hidden" name="Opportunity" value="006C000000bpdl2IAA"/>
        <input type="number" name="TotalOrdered" value="0" pattern="[0-9]*"  min="0" max="1">
    </td>
    </tr>
          <tr>
    <td>Xcelente Multi Purpose Cleaner -Gl</td>
    <td>Material</td>
    <td>1</td>
    <td>
        <input type="hidden" name="MaterialId"  value="a0GC000000nl1UxMAI"/>
        <input type="hidden" name="Opportunity" value="006C000000bpdl2IAA"/>
        <input type="number" name="TotalOrdered" value="1" pattern="[0-9]*"  min="0" max="1">
    </td>
    </tr>
      </table>

我怎样才能得到这个，任何帮助将不胜感激

Answer 1

     var data_sent_to_server = [];
     table.rows().data().each(function(d){
        var obj = {}
        $(d[3]).each(function(i, e){
            if($(e).is("input")){
                obj[$(e).attr("name")] = $(e).val()
            }
        });
        data_sent_to_server.push(obj)
     });
     console.log(data_sent_to_server)

可能有一种更优雅的方法，但这很有效。这里的工作示例：https://jsfiddle.net/annoyingmouse/wsch891n/

注意

正如已经指出的，使用上面的方法只能获取原始值，要从输入中获取当前值，您可以使用 jQuery：

     var data_sent_to_server = [];
     table.$('tr').each(function(i, row){
        var obj = {}
        $(row).find('input').each(function(e, input){
            obj[$(input).attr("name")] = $(input).val()
        })
        data_sent_to_server.push(obj)
     });
     console.log(data_sent_to_server);

这会得到正确的值，但我几乎可以肯定会有一种方法可以在输入更改时更新基础数据 - 这是一个很好的尝试，那么您就不必担心分页等...我已经更新了 JSFiddle。

Answer 2

你真的不需要做任何 JSON 的东西。只需在表单/输入上调用 serializeArray()，使用 ajax 传递结果，然后查看 POST 中的内容。话虽如此，下面是我转换数据的方式。

将输入包装在一个表单中，并为表单指定一个 id。更改您的按钮单击事件侦听器以防止提交表单

$('button').click( function(e) {
    e.preventDefault();
}

下面的函数会按照你描述的方式返回一个对象。

function jsonFormData (formId) {
    const arr = $('#' + formId).serializeArray(), obj = {};
    for(let i = 0; i < arr.length; i++) {
        if(obj[arr[i].name] === undefined) {
            obj[arr[i].name] = arr[i].value;
        } else {
            if(!(obj[arr[i].name] instanceof Array)) {
                obj[arr[i].name] = [obj[arr[i].name]];
            }
            obj[arr[i].name].push(arr[i].value);
        }
    }
    return obj;
}