Я получаю JSON с помощью метода Get в jQuery и добавляю данные в таблицу 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, прежде чем добавлять данные в таблицу. Я здесь на правильном пути?

1
Byate 25 Янв 2014 в 02:09
Вам не нужен еще один цикл for. поскольку похоже, что вы используете только 1 субпродукт subproducts[0], вам нужно проверить его наличие / длину
 – 
Venkata Krishna
25 Янв 2014 в 02:11
Потенциально существует более одного subproduct, но мне нужно выбрать только один из них
 – 
Byate
25 Янв 2014 в 02:21

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, и вам действительно не нужно проверять каждую вещь, но вы должны решить, насколько вы не уверены заключаются в том, что ключи и объекты будут существовать, и проверить то, что может отсутствовать, и т. д. Выше показано только различные тесты, которые вы можете выполнить.

1
adeneo 25 Янв 2014 в 02:28
Это действительно здорово. Использовал первый метод, и это изящный способ структурирования сложных данных JSON, которые я получаю. Спасибо!
 – 
Byate
25 Янв 2014 в 02:35