创建多维 JSON

Question

我创建 JSON 的代码是：

function buildRequestStringData(form) {
    var select = form.find('select'),
        input = form.find('input'),
        requestString = '{';
    for (var i = 0; i < select.length; i++) {
        requestString += '"' + $(select[i]).attr('name') + '": "' +$(select[i]).val() + '",';
    }
    if (select.length > 0) {
        requestString = requestString.substring(0, requestString.length - 1);
    }
    for (var i = 0; i < input.length; i++) {
        if ($(input[i]).attr('type') !== 'checkbox') {
            requestString += '"' + $(input[i]).attr('name') + '":"' + $(input[i]).val() + '",';
        } else {
            if ($(input[i]).attr('checked')) {
                requestString += '"' + $(input[i]).attr('name') +'":"' + $(input[i]).val() +'",';
            }
        }
    }
    if (input.length > 0) {
        requestString = requestString.substring(0, requestString.length - 1);
    }
    requestString += '}';
    return requestString;
}

$('#checkoutButton').click(function () {
    alert(buildRequestStringData($('#orderList')));
});

输出是：

{
"cardQuantity":"",
"cardamount":"200",
"cardquantity":"2500",
"cardimg":"http:fb44.jpg?3926",
"gcardID":"GCRDaK15",

"cardQuantity":"",
"cardamount":"300",
"cardquantity":"900",
"cardimg":"http:e4c17.jpg?3926",
"gcardID":"GCRD7h17"

}

而我的预期输出是：

{
            "data": [
                {
                    "cardQuantity":"",
                    "cardamount":"200",
                    "cardquantity":"2500",
                    "cardimg":"http:fb44.jpg?3926",
                    "gcardID":"GCRDaK15"
                },
                {
                    "cardQuantity":"",
                    "cardamount":"300",
                    "cardquantity":"900",
                    "cardimg":"http:e4c17.jpg?3926",
                    "gcardID":"GCRD7h17"
                }
            ]
}

每个数组都相当于这段代码的一个循环（或一键单击）：

$("#addCart").click(function(){

var cardamount = $('#cardamount').val();
var cardquantity = $('#cardquantity').val();
var cardimg = $('#cardimg').val();
var cardID = $('#cardID').val();
var gcardID = $('#gcardID').val();
if(!cardID){
    alert("Please select a card!");
}
else{
    $("#no-data").hide();
var order = '<div id="orders-data">'+
                '<table class="table table-borderless" style="margin: 0;">'+
                    '<tr>'+
                        '<td width="27%">'+
                            '<input class="form-control cardQuantity" id="cardQuantity" name="cardQuantity" type="number" placeholder="Qty"/>'+
                        '</td>'+
                        '<td width="45%">'+
                            '<div class="card">'+
                              '<img src="'+cardimg+'" alt="Avatar" style="width:100%">'+
                            '</div>'+
                        '</td>'+
                        '<td width="35%">'+cardamount+'</td>'+
                    '</tr>'+
                    '<tr>'+
                        '<td colspan="3" style="text-align: left;">'+
                            '<b>Recipient Email:</b>'+
                            '<p>To: butch123@gmail.com</p>'+
                            '<b>Purchaser Email:</b>'+
                            '<p>To: sample@gmail.com</p>'+
                        '</td>'+
                    '</tr>'+
                '</table>'+ 
            '<button class="btn btn-block btn-sm" style="margin-right: 15%;">EDIT</button>'+
            '<button class="btn btn-block btn-sm remove">REMOVE</button>'+
            '<hr>'+
                '<div class="form-group">'+
                '<label for="cardamount">Amount</label>'+
                '<input class="form-control" id="cardamount" name="cardamount" type="text" value="'+cardamount+'"/>'+
                '</div>'+
                '<div class="form-group">'+
                '<label for="cardquantity">Quantity</label>'+
                '<input class="form-control" id="cardquantity" name="cardquantity" type="text" value="'+cardquantity+'"/>'+
                '</div>'+
                '<div class="form-group">'+
                '<label for="cardimg">Img</label>'+
                '<input class="form-control" id="cardimg" name="cardimg" type="text" value="'+cardimg+'"/>'+
                '</div>'+
                '<div class="form-group">'+
                '<label for="cardimg">gcardID</label>'+
                '<input class="form-control" id="gcardID" name="gcardID" type="text" value="'+cardID+'"/>'+
                '</div>'+
            '</div>';
$(order).appendTo('#orderList');

有人能告诉我我缺少什么来获得预期的输出吗？谢谢

Answer 1

在适当的地方添加标签可能会有所帮助

    function buildRequestStringData(form) {
        var select = form.find('select'),
            input = form.find('input'),
            requestString = '{ "data": [';  // Creating the data tag
        for (var i = 0; i < select.length; i++) {
            requestString += '"' + $(select[i]).attr('name') + '": "' +$(select[i]).val() + '",';
        }
        if (select.length > 0) {
            requestString = requestString.substring(0, requestString.length - 1);
        }
        for (var i = 0; i < input.length; i++) {
            if ($(input[i]).attr('type') !== 'checkbox') {
                requestString += '"' + $(input[i]).attr('name') + '":"' + $(input[i]).val() + '",';
            } else {
                if ($(input[i]).attr('checked')) {
                    requestString += '"' + $(input[i]).attr('name') +'":"' + $(input[i]).val() +'",';
                }
            }
            requestString +='},'; // constructing the array element
        }
        if (input.length > 0) {
            requestString = requestString.substring(0, requestString.length - 1);
        }
        requestString += ' ] }'; // closing the object tag
        return requestString;
    }

    $('#checkoutButton').click(function () {
        alert(buildRequestStringData($('#orderList')));
    });