Select не прогружает варианты выбора, не могу разобраться, почему?

Question

[holllop]

у меня конструкция типа

<tr>
      <td class="first_row">1. <button class="add1">+</button>
      </td>
      <td>
        <select class="val" id="select1">
        </select><!--выбор типа работы-->
      </td>
      <td>
        <select class="val" id="select2">
        </select><!--выбор принтера-->
      </td>
      <td>
        <select class="val" id="select3">
        </select><!--выбор материала-->
      </td>
      <td>
        <input class="val" type="date" />
      </td><!--дата-->
      <td>
        <select class="val" id="select4">
        </select><!--выбор исполнителя-->
      </td>
      <td>
        <select class="added" id="select5">
        </select><!--выбор формата-->
        <button class="add">+</button>
      </td>
      <td>
        <input type="number" class="number" />
      </td>
      <td>
        <input type="number" class="number"/>
      </td>
      <td>
        <input type="number" class="number"/>
      </td>
      <td>
        <input type="number" class="number"/>
      </td>
    </tr>

и я для всех select варианты подгружаю с JSON

const selectElements = document.querySelectorAll('.val');
const addButtons = document.querySelectorAll('.add1'); 
const departmentSelect = document.querySelector('#department');

// Функция для создания option элементов
function createOption(value, text) {
  const option = document.createElement('option');
  option.value = value;
  option.textContent = text;
  return option;
}

function loadSelectOptions1(url, selectElement) {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error('Ошибка загрузки данных');
      }
      return response.json();
    })
    .then(data => {
      data.forEach(item => {
        const option = createOption(item.type_work, item.type_work);
        selectElement.appendChild(option);
      });
    })
    .catch(error => {
      console.error(error);
    });
}

// Функция загрузки опций для 2 <select>
function loadSelectOptions2(url, selectElement) {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error('Ошибка загрузки данных');
      }
      return response.json();
    })
    .then(data => {
      data.forEach(item => {
        const option = createOption(item.printer_id, item.printer);
        selectElement.appendChild(option);
      });
    })
    .catch(error => {
      console.error(error);
    });
}

// Функция загрузки опций для 3 <select>
function loadSelectOptions3(url, selectElement) {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error('Ошибка загрузки данных');
      }
      return response.json();
    })
    .then(data => {
      data.forEach(item => {
        const option = createOption(item.printer_id, item.material);
        selectElement.appendChild(option);
      });
    })
    .catch(error => {
      console.error(error);
    });
}

// Функция загрузки опций для 4 <select>
function loadSelectOptions4(url, selectElement) {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error('Ошибка загрузки данных');
      }
      return response.json();
    })
    .then(data => {
      data.forEach(item => {
        const option = createOption(item.performer_id, item.performer);
        selectElement.appendChild(option);
      });
    })
    .catch(error => {
      console.error(error);
    });
}

// Функция загрузки опций для 5 <select>
function loadSelectOptions5(url, selectElement) {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error('Ошибка загрузки данных');
      }
      return response.json();
    })
    .then(data => {
      data.forEach(item => {
        const option = createOption(item.printer_id, item.format);
        selectElement.appendChild(option);
      });
    })
    .catch(error => {
      console.error(error);
    });
}
function loadSelectData() {
  // Загрузка данных для select c классом 'val'
  selectElements.forEach((selectElement, index) => {
    switch (index) {
      case 0:
        loadSelectOptions1('http://:3000/type_work', selectElement);
        break;
      case 1:
        loadSelectOptions2('http://:3000/printerCB', selectElement);
        break;
      case 2:
        loadSelectOptions3('http://:3000/printer_material?printer_id=2', selectElement);
        break;
      case 3:
        
        break;
      case 4:
        loadSelectOptions4('http://:3000/performers', selectElement);
        break;
      case 5:
        loadSelectOptions5('http://:3000/printer_format?printer_id=2', selectElement);
        break;
    }
  });
}
window.addEventListener('DOMContentLoaded', () => {
  loadSelectData();
});

И что я только не делал и JSON проверял, там всё работает. И в другой case совал эти данные, они выводятся. И другие способы хотел придумать, но в голову не чего не лезет. В чём проблема не пойму. Почему в select 5 не выводятся данные ?

Comments

[Сергей delphinpro]

Зачем вам пять (!) одинаковых функций, которые отличаются только названиями? =))
Оставьте одну.

[Сергей delphinpro]

function loadSelectOptions(url, selectElement, keyVal, keyText) {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error('Ошибка загрузки данных');
      }
      return response.json();
    })
    .then(data => {
      data.forEach(item => {
        const option = createOption(item[keyVal], item[keyText]);
        selectElement.appendChild(option);
      });
    })
    .catch(error => {
      console.error(error);
    });
}

loadSelectOptions('http://:3000/type_work', selectElement, 'type_work', 'type_work');
loadSelectOptions('http://:3000/printerCB', selectElement, 'printer_id', 'printer');
loadSelectOptions('http://:3000/printer_material?printer_id=2', selectElement, 'printer_id', 'material');
loadSelectOptions('http://:3000/performers', selectElement, 'performer_id', 'performer');
loadSelectOptions('http://:3000/printer_format?printer_id=2', selectElement, 'printer_id', 'format');

[holllop]

Сергей delphinpro, я сделал так потому что у них разные then и что-то не додумался до такого метода, да и примеров не видел подобных

[Сергей delphinpro]

holllop,
или так

function loadSelectOptions(url, selectElement, callback) {
...
      data.forEach(item => {
        const o = callback(item);
        const option = createOption(o.val, o.text);
        selectElement.appendChild(option);
      });
...
}

loadSelectOptions(
  'http://:3000/type_work',
  selectElement,
  item => ({val:item.type_work, text: item.type_work})
);
loadSelectOptions(
  'http://:3000/printerCB',
  selectElement,
  item => ({val:item.printer_id, text: item.printer})
);
loadSelectOptions(
  'http://:3000/printer_material?printer_id=2',
  selectElement,
  item => ({val:item.printer_id, text: item.material})
);
loadSelectOptions(
  'http://:3000/performers',
  selectElement,
  item => ({val:item.performer_id, text: item.performer})
);
loadSelectOptions(
  'http://:3000/printer_format?printer_id=2',
  selectElement,
  item => ({val:item.printer_id, text: item.format})
);

Answer 1

[Danny Arty]

selectElements - это select-ы с классом val, а у select5 у тебя такого класса нет, есть только added

Comments

[holllop]

прозевал этот момент