есть API категории с группами и атрибутами, я реализовал вывод из этого API на странице через JS группы и атрибуты, но на каждым атрибутом дублируется группа, как сделать что бы название группы выводила один раз а под ним блок атрибутов. Ниже прилагаю код и внешний вид который сейчас выводится.
function renderSubFields(fields) {
const specifications = document.getElementById('category_attributes');
document.getElementById('category_attributes').innerHTML = '';
if (fields[0].data && fields[1].success) {
let typeElement = '';
fields[0].data.forEach(parameter => {
parameter.attributes.forEach(atr => {
if (atr.type === "free") typeElement = 'input';
if (atr.type === "real") typeElement = 'input';
if (atr.type === "singleselect") typeElement = 'select';
if (atr.type === "multiselect") typeElement = 'select';
const element = document.createElement(typeElement);
element.id = atr.id;
if (atr.type === 'input') element.type = "free";
if (atr.type === 'input') element.type = "real";
let selElement = document.createElement('span');
if (atr.options.length > 0 && atr.type === 'singleselect') {
atr.options.forEach(opt => {
element.insertAdjacentHTML("beforeend", `<option value = "${opt.id}">${opt.name_rus}</option>`);
})
}
if (atr.options.length > 0 && atr.type === 'multiselect') {
atr.options.forEach(opt => {
element.insertAdjacentHTML("beforeend", `<option value = "${opt.id}">${opt.name_rus}</option>`);
})
}
let inputField =
`<div>
<span class="col-md-12" data-gr="${parameter.id}" >${parameter.name}</span>
</div>
<div class = "row">
<span class="col-md-2">${atr.name_rus}: </span>
${element.outerHTML} ${selElement.outerHTML}
</div>
`;
specifications.insertAdjacentHTML('beforeend', inputField);
});
})
}
}