Проблема с таблицей jQuery при зацикливании
Я хочу создать одну таблицу, но есть два цикла, так как есть два массива, которые необходимо включить в таблицу.
Вот два массива (из консоли):
Объект {квота: (5) […], productName: (5) […]}
В квоте есть числа, относящиеся к каждому из productName.
Вот часть кода для этой таблицы.
jQuery.ajax({
type: "POST",
url: "http://ayambrand-com-my-v1.cloudaccess.host/index.php?option=com_echarity&format=raw&task=api.get_product_name",
data: {dataArrayPost : Data},
success: function(data){
var a = JSON.parse(data);
console.info(a);
var prodName = a.productName;
var splitProductName = "";
var prodQty = a.quota;
var splitProductQuota = "";
var contents = '<table id = "tableDonateDisplay" class = "table table-hover">';
contents += "<tr>";
contents += '<th>' + 'Product' + '</th>' + '<th>' + 'Quantity Need' + '</th>' + '<th>' + 'Price Each' + '</th>' + '<th>' + 'My Donation' + '</th>' + '<th>' + 'Amount' + '</th>';
jQuery.each(prodName, function(index, value) {
splitProductName = value;
contents += "<tr>";
contents += '<td>' + splitProductName;
});
jQuery.each(prodQty, function(index, value) {
splitProductQuota = value;
contents += '</td><td>' + splitProductQuota + '</td>' + '<td>' + '' + '</td>' + '<td>' + '' + '</td>' + '<td>' + '' + '</td>';
contents += "</tr>";
});
contents += "</tr></table>";
jQuery('#contentNeed').append(contents);
}
});
Стол стал таким. Как я могу сделать эту квоту рядом с названием продукта?
Данные JSON:
Вставив <tr> в первый цикл (splitProductName), он сделает второй цикл (splitProductQuota) для необходимого количества ниже названия продукта. Вопрос в том, как я могу сделать так, чтобы количество, которое нужно, помещалось в одну строку с названием продукта, потому что они связаны друг с другом.
не могли бы вы опубликовать свои данные json. я решу вашу проблему.
Загрузили данные JSON @kalai
это формат json. var a = {productName: ["a", "b", "c", "d"], quota: [1, 5, 10, 20]};
не могли бы вы опубликовать в строковом формате @MohdShafiq
Ответы 1
Сначала вам нужно закрыть тег trth, затем проверить индекс обеих итераций:
var a = {
productName: ["a", "b", "c", "d"],
quota: [1, 5, 10, 20]
};
console.info(a);
var prodName = a.productName;
var splitProductName = "";
var prodQty = a.quota;
var splitProductQuota = "";
var contents = '<table id = "tableDonateDisplay" class = "table table-hover" border = "1">';
contents += "<tr>";
contents += '<th>' + 'Product' + '</th>' + '<th>' + 'Quantity Need' + '</th>' + '<th>' + 'Price Each' + '</th>' + '<th>' + 'My Donation' + '</th>' + '<th>' + 'Amount' + '</th>';
contents += "</tr>";
jQuery.each(prodName, function(index1, value1) {
splitProductName = value1;
contents += "<tr>";
contents += '<td>' + splitProductName;
jQuery.each(prodQty, function(index, value) {
if (index1 == index) {
splitProductQuota = value;
contents += '</td><td>' + splitProductQuota + '</td>' + '<td>' + '' + '</td>' + '<td>' + '' + '</td>' + '<td>' + '' + '</td>';
contents += "</tr>";
}
});
});
contents += "</tr></table>";
jQuery('#contentNeed').append(contents);<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "contentNeed">
</div>Я создал фиктивный объект JSON.
Осмотрите стол в консоли, он неправильно структурирован.
trне закрывается.