Я получаю несколько данных из базы данных с помощью AJAX и PHP. После успеха AJAX я группирую данные результатов, как показано на изображениях ниже, в которых мне нужно поле textarea
для каждой группы.
Я пытаюсь использовать следующий сценарий
function getResult(id = null) {
if (id) {
$.ajax({
url: 'fetch.php',
type: 'post',
data: {id: id},
dataType: 'json',
success: function(response) {
var lastCategory = null;
response.result.forEach(function(element) {
console.info(element);
var category = element.category;
var names = element.name;
var Result = element.result;
var note = element.note;
if (lastCategory != category) {
$('table tr').length;
html = '<tr>';
html += '<td><p>'+category+'</p></td>';
html += '</tr>';
$('table').append(html);
lastCategory = category;
}
$('table tr').length;
html = '<tr>';
html += '<td><p>' + names + '</p></td>';
html += '<td><p>' + Result + '</p></td>';
html += '</tr>';
$('table').append(html);
$('table tr').length;
html = '<tr>';
html += '<td><textarea placeholder = "textarea...">' + note + '</textarea></td>';
html += '</tr>';
$('table').append(html);
});
}
});
} else {
alert('error');
}
}
но он дает такой результат:
Это желаемый результат:
На этом этапе я, скорее всего, преобразовал бы ваши данные в формат, который вы ищете. В этом случае ваш response.result
сгруппирован по category
. Я высмеивал очень простой пример того, как вы можете сделать это с помощью цикла .forEach()
, но есть и другие альтернативы, такие как использование функции .groupBy()
здесь. (например, var cats = groupBy(response.result, 'category')
)
Теперь это упрощает отделение категорий от фактических элементов. См. Код ниже:
var response = {
result: [
{category: 'Team A', name: 'Jema', result: 43},
{category: 'Team B', name: 'Deno', result: 34},
{category: 'Team B', name: 'Niob', result: 56},
{category: 'Team B', name: 'Skion', result: 49},
],
};
var cats = {};
response.result.forEach(function(element) {
cats[element.category] = cats[element.category] || [];
cats[element.category].push(element);
});
Object.keys(cats).forEach(function(category) {
let html = '';
// Append the category header
html = '<tr>';
html += '<td><p>'+category+'</p></td>';
html += '</tr>';
$('table').append(html);
// Loop through the results for this category
cats[category].forEach(function(element) {
var names = element.name;
var result = element.result;
html = '<tr>';
html += '<td><p>' + names + '</p></td>';
html += '<td><p>' + result + '</p></td>';
html += '</tr>';
$('table').append(html);
});
// Append the textarea at the end of the results
html = '<tr>';
html += '<td><textarea placeholder = "textarea..."></textarea></td>';
html += '</tr>';
$('table').append(html);
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table></table>
Как я могу получить заметку из базы данных на этот textarea
.
его работа еще раз спасибо за ваше драгоценное время.