Вывод названия группы атрибутов один раз для атрибутов JS

Question

есть 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}&nbsp;${selElement.outerHTML}
        </div>
        `;
        specifications.insertAdjacentHTML('beforeend', inputField);


      });


    })
  }


}

Answer 1

Решил вопрос перестройкой структуры вывода данных массива

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 => {

      let inputField1 =
         `<div>
           <span  class="col-md-12" data-gr="${parameter.id}" >${parameter.name}</span>
         </div>  `;
         specifications.insertAdjacentHTML('beforeend', inputField1)

      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') {
          element.multiple="multiple";
          atr.options.forEach(opt => {
            element.insertAdjacentHTML("beforeend", `<option value = "${opt.id}">${opt.name_rus}</option>`);
          })
        }

        let inputField =
        `
        <div class = "row">
        <span  class="col-md-2">${atr.name_rus}: </span>
        ${element.outerHTML}&nbsp;${selElement.outerHTML}
        </div>
        `;
        specifications.insertAdjacentHTML('beforeend', inputField);

      });

    })
  }

}

БЛОГ НА HUSL

Вывод названия группы атрибутов один раз для атрибутов JS

Ответы (1 шт):