Question

我正在通过jQuery中的Get方法检索JSON并将数据附加到HTML表。

JSON数据的结构如下：

{
"response":{
     "message":"correct"
   },
 "products":[
             {
             "name":"tools",
             "productid":"14",
             "subproducts":[
                                  {
                                   "subproductname":"hammer",
                                   "subproductid":"24"
                                   },
                                    {
                                   "subproductname":"screw",
                                   "subproductid":"28"
                                   },
                            ],
               },
               {
             "name":"utilities",
             "productid":"15",
             "subproducts":[],
               },
            ]
    }
}

我可以成功解析JSON以从数据中检索name和productid的每个实例，并附加到表中的新行。但是，我在从数据中检索subproductname时遇到问题，因为subproducts数组并不总是包含数据（参见上面的简单示例）。

我的jQuery代码如下所示：

$.getJSON('url' + name, function(data) {
    for (var i = 0; i < data.response.products.length; ++i) {
    var tr = $('<tr/>');
    tr.append("<td class='name'>" + data.response.products[i].name + "</td>");
    tr.append("<td class='id'>" + data.response.products[i].productid + "</td>");    
    tr.append("<td class='subproductid'>" + data.response.products[i].subproducts[0].subproductname + "</td>");
    $('#table').append(tr);
    };
 });

就目前而言，我已将[0]添加到tr.append行中的子产品中，这些子产品在很小程度上起作用但我的问题是数据仅附加在subproducts数组的位置还包含数据。无论product数组是否包含任何数据，我都希望能够附加subproducts数组所在的所有数据。如果subproducts数组中有数据，则会将其添加到其td类中，但如果不存在，则td类中的文本应保持为空，并且仍应附加name和productid数据

我对如何克服这个问题感到困惑 - 我的想法是我需要在将数据附加到表之前添加另一个for行。我在这里排在正确的位置吗？

Answer 1

在尝试访问之前，只需检查数组是否包含length的任何内容：

$.getJSON('url' + name, function(data) {
    $.each( data.response.products, function(i, product) {
        var tr  = $('<tr />'),
            sub = product.subproducts.length ? product.subproducts[0].subproductname : '',
            td1 = $('<td />', {
                 'class' : 'name', 
                 text    : product.name
            }),
            td2 = $('<td />', {
                 'class' : 'id', 
                 text    : product.productid
            }),
            td3 = $('<td />', {
                 'class' : 'subproductid', 
                 text    : sub
            });

        tr.append(td1, td2, td3).appendTo('#table');
    });
});

如果你需要，你可以更彻底，检查每一步。

var sub = '';

if ('subproducts' in product) { // that key exists

    if ( Array.isArray(procuct.subproducts) ) { // it's an array

        if ( procuct.subproducts.length ) { // it's not empty

            if ( 'subproductname' in procuct.subproducts[0] ) // and that key exists

                 sub = product.subproducts[0].subproductname;

            }
        }
    }
}

这真的很冗长，而不是你通常写这样的东西，因为你可以在一个if语句中加入支票，你不应该真的检查每一件事，但你必须决定你是多么不确定键和对象是否存在，并测试可能丢失的东西等。上面只显示了你可以做的不同测试。

迭代嵌套的JSON，其中可能存在空数组

1 个答案: