创建多维 JSON

Posted 2023-03-05

【中文标题】创建多维 JSON

【英文标题】：Create multidimensional JSON

【发布时间】：2017-06-12 18:04:54

【问题描述】：

我创建 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 >'+
                            '<input class="form-control cardQuantity" id="cardQuantity" name="cardQuantity" type="number" placeholder="Qty"/>'+
                        '</td>'+
                        '<td >'+
                            '<div class="card">'+
                              '<img src="'+cardimg+'"  style="width:100%">'+
                            '</div>'+
                        '</td>'+
                        '<td >'+cardamount+'</td>'+
                    '</tr>'+
                    '<tr>'+
                        '<td colspan="3" style="text-align: left;">'+
                            '<b>Recipient Email:</b>'+
                            '<p>To: [e-mail]</p>'+
                            '<b>Purchaser Email:</b>'+
                            '<p>To: [e-mail]</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');

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

【问题讨论】：

var a = [1, 2, 3]; -> a.push([1, 2, 3])

见Creating a JSON dynamically with each input value using jquery

不要尝试自己创建 JSON。将数据放入数组和对象中，并调用JSON.stringify()将其转换为JSON。

jQuery 还有一个函数$('form').serializeArray()，我认为它可以满足您的需求。

【参考方案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')));
    );

【讨论】：

最好创建 javascript 对象，然后使用JSON.stringify() 将其转换为 JSON。

是的，但是根据我给出的解决方案的代码。

@Satpal 如何根据我的代码使用 JSON.stringify()？因为函数 buildRequestStringData(form) 将读取所有数据并同时创建 json。

@zuma，你需要创建对象然后使用方法JSON.stringify(data : [ 'a' : 1, 'a' : 2])

@NishantNair 我试过你的代码，但输出是： "data": ["cardQuantity":"", ,"cardamount":"200", ,"cardquantity":"2500", ,"cardimg":"fb44.jpg?5026", ,"gcardID":"RDaK15", ,"cardQuantity":"", ,"cardamount":"300", ,"cardquantity":"900", ,"cardimg":"http://784641e4c17.jpg?5026",,"gcardID":"D7h17", ]