0

есть 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);


      });


    })
  }


}

1 ответ 1

0

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

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);

      });

    })
  }

}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.