javascript - 更改 JavaScript 中的 JSON 格式

Question

我最近开发了一个接受这种格式的 json 数据的 REST 服务

{
    "foods": "food1, food2, food3",
    "qty": "1,2,3"
}

但是我的 JavaScript 生成了这种格式

["food1","1","food2","2","food3","3"]

我用 php 写了其余部分

数据来自此表体

<tbody id="tr">
    <tr>
        <td class="data">food1</td>
        <td class="data">1</td>
        <td>
            <div class="col-sm-1">
                <button type="button" class="btn btn-danger removethisfood">-</button>
            </div>
        </td>
    </tr>
    <tr>
        <td class="data">food1</td>
        <td class="data">1</td>
        <td>
            <div class="col-sm-1">
                <button type="button" class="btn btn-danger removethisfood">-</button>
            </div>
        </td>
    </tr>
    <tr>
        <td class="data">food1</td>
        <td class="data">1</td>
        <td>
            <div class="col-sm-1">
                <button type="button" class="btn btn-danger removethisfood">-</button>
            </div>
        </td>
    </tr>
</tbody>

我的java脚本代码

var tbl = $('#tr').map(function() {
     return $(this).find('td.data').map(function() {
       return $(this).html();
     }).get();
   }).get();
   console.log(JSON.stringify(tbl));

Answer 1

您可以通过循环每个 tr 并将相关 td 的文本添加到数组中来实现所需的格式，然后通过加入以下文本来构建最终对象:将数组放在一起，如下所示:

var foods = [], qty = [];        
$('tr').each(function() {
    var $row = $(this);
    foods.push($row.find('td:eq(0)').text());
    qty.push($row.find('td:eq(1)').text());
})

var obj = {
    foods: foods.join(','),
    qty: qty.join(',')
};

也就是说，您的 JSON 格式可以改进，以提高序列化/反序列化的清晰度和简单性。发送一个数组，其中每个项目都包含在一个对象中，参数是其名称和数量，这样会更有意义，如下所示:

var obj = $('tr').map(function() {
    var $row = $(this);
    return {
        food: $row.find('td:eq(0)').text(),
        qty: $row.find('td:eq(1)').text()
    }
}).get()

此输出如下所示:

[{
    "food": "food1",    
    "qty": "1"
},{
    "food": "food2",
    "qty": "1"
},{
    "food": "food3",
    "qty": "1"
}]

Working example