Я получаю 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 ответ
Просто проверьте, содержит ли массив что-нибудь с 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, и вам действительно не нужно проверять каждую вещь, но вы должны решить, насколько вы не уверены заключаются в том, что ключи и объекты будут существовать, и проверить то, что может отсутствовать, и т. д. Выше показано только различные тесты, которые вы можете выполнить.
Похожие вопросы
Новые вопросы
jquery
jQuery - это библиотека JavaScript, рассмотрите возможность добавления тега JavaScript. jQuery - это популярная кросс-браузерная библиотека JavaScript, которая облегчает прохождение Document Object Model (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться в рассматриваемом коде, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.
En Español
subproducts[0], вам нужно проверить его наличие / длинуsubproduct, но мне нужно выбрать только один из них