Resumir código

[John Hebert Trindade]

Boa noite pessoal, tenho o código abaixo em javascript a funcionar perfeitamente, mas para não ter que duplicando o código toda vez que eu criar um select novo como faço para resumir os três em um só ou criar um genérico que de para todos os select?

async function selecionarConcelhos() {
  // Receber a marca selecionada pelo usuario
  var adms_distrito = document.getElementById('adms_distrito_id').value

  // Chamar o endereço externo com JavaScript, mas pode ser jQuery, etc.
  var dados = await fetch(urlAdm + 'add-tecnico/index?distrito=' + adms_distrito)

  // Ler os dados retornado do PHP
  var resposta = await dados.json()

  if (resposta['status']) {
    var opcoesCampoSelect = "<option value=''>Selecione</option>"

    // Ler o um Array
    await resposta['data'].forEach(function (item) {
      // Usar template strings para colocar variável internamente
      opcoesCampoSelect += `<option value='${item['id']}'>${item['name_concelho']}</option>`
    })

    // Enviar as opções do campo listar_usuarios para o HTML
    document.getElementById('adms_concelho_id').innerHTML = opcoesCampoSelect
    document.getElementById('adms_freguesia_id').innerHTML = `<option value=''>Selecione</option>`
  } else {
    document.getElementById(
      'adms_concelho_id'
    ).innerHTML = `<option value=''>${resposta['msg']}</option>`
    document.getElementById('adms_freguesia_id').innerHTML = `<option value=''>Selecione</option>`
  }
}

async function selectConcelhosConjuge() {
  // Receber a marca selecionada pelo usuario
  var adms_distrito = document.getElementById('adms_distr_conj_id').value

  // Chamar o endereço externo com JavaScript, mas pode ser jQuery, etc.
  var dados = await fetch(urlAdm + 'add-tecnico/index?distrito=' + adms_distrito)

  // Ler os dados retornado do PHP
  var resposta = await dados.json()

  if (resposta['status']) {
    var opcoesCampoSelect = "<option value=''>Selecione</option>"

    // Ler o um Array
    await resposta['data'].forEach(function (item) {
      // Usar template strings para colocar variável internamente
      opcoesCampoSelect += `<option value='${item['id']}'>${item['name_concelho']}</option>`
    })

    // Enviar as opções do campo listar_usuarios para o HTML
    document.getElementById('adms_conc_conj_id').innerHTML = opcoesCampoSelect
    document.getElementById('adms_freg_conj_id').innerHTML = `<option value=''>Selecione</option>`
  } else {
    document.getElementById(
      'adms_conc_conj_id'
    ).innerHTML = `<option value=''>${resposta['msg']}</option>`
    document.getElementById('adms_freg_conj_id').innerHTML = `<option value=''>Selecione</option>`
  }
}

async function selectConcelhos() {
  // Receber a marca selecionada pelo usuario
  var adms_distrito_nasc = document.getElementById('adms_dist_nasc_id').value

  // Chamar o endereço externo com JavaScript, mas pode ser jQuery, etc.
  var dados = await fetch(urlAdm + 'add-tecnico/index?distrito=' + adms_distrito_nasc)

  // Ler os dados retornado do PHP
  var resposta = await dados.json()

  if (resposta['status']) {
    var opcoesCamposSelect = "<option value=''>Selecione</option>"

    // Ler o um Array
    await resposta['data'].forEach(function (item) {
      // Usar template strings para colocar variável internamente
      opcoesCamposSelect += `<option value='${item['id']}'>${item['name_concelho']}</option>`
    })

    // Enviar as opções do campo listar_usuarios para o HTML
    document.getElementById('adms_conc_nasc_id').innerHTML = opcoesCamposSelect
    document.getElementById('adms_freg_nasc_id').innerHTML = `<option value=''>Selecione</option>`
  } else {
    document.getElementById(
      'adms_conc_nasc_id'
    ).innerHTML = `<option value=''>${resposta['msg']}</option>`
    document.getElementById('adms_freg_nasc_id').innerHTML = `<option value=''>Selecione</option>`
  }
}

 

Edited July 5, 2024 at 09:04 PM by John Hebert Trindade

[Rui Carlos]

Podes fazer um diff da várias funções, e definir variáveis para personalizar cada versão.

Neste caso, podes definir uma convenção para os IDs em que o prefixo das várias versões é comum, e apenas o sufixo muda.

async function selectCity(suffix) {
  const adms_distrito = document.getElementById('adms_distrito' + suffix).value;

  const data = await fetch(urlAdm + 'add-tecnico/index?distrito=' + adms_distrito).then(res => res.json());

  if (data['status']) {
    let optionsSelect = '<option value=\'\'>Selecione</option>';

    data['data'].forEach((item) => {
      optionsSelect += `<option value='${item['id']}'>${item['name_concelho']}</option>`;
    })

    document.getElementById('adms_concelho' + suffix).innerHTML = optionsSelect;
  } else {
    document.getElementById('adms_concelho' + suffix).innerHTML = `<option value=''>${data['msg']}</option>`;
  }
  document.getElementById('adms_freguesia' + suffix).innerHTML = `<option value=''>Selecione</option>`;
}

 

Algumas notas adicionais:

• Estás a misturar nomes em português e inglês.  Recomendo-te usares inglês para o código, e apenas português para os textos que são mostrados ao utilizador.
• Usar um linter para te ajudar a teres código mais consistente, e a seguir as recomendações mais recentes de JS.

[John Hebert Trindade]

Obrigado pelas dicas @Rui Carlos