Mark Check Box in an EJS dynamically through JS

Asked

Viewed 14 times

-2

I need to format a JS on EJS so it dynamically marks a check box with the data coming from Nodejs.

This is the EJS with the code that is not working:

              <div class="form-group row">
            <label class="col-xl-3 col-lg-3 text-center col-form-label">Confirme ou altere os seus cursos:</label>
            <div class="col-lg-9 col-xl-6">
              <div class="checkbox-list" id="cursos">
                <label class="checkbox">
                  <input type="checkbox" name="course3" value="<%= dados.areasDeInteresse.find(x => x == 'Big Data') ? 'x' : ''%>"/><span></span>
                  <div>
                  <strong>Big Data</strong>
                  </div>
                </label>
                <label class="checkbox">
                  <input type="checkbox"  name="course0" value="<%= dados.areasDeInteresse.find(x => x == 'Cloud Computing') ? 'x' : ''%>"/><span></span>
                  <div>
                  <strong>Cloud Computing</strong></div>
                </label>
                <label class="checkbox">
                  <input type="checkbox"  name="course1" value="<%= dados.areasDeInteresse.find(x => x == 'Inteligência Artificial') ? 'x' : ''%>"/><span></span>
                  <div>
                  <strong>Inteligência Artificial</strong></div>
                </label>
                <label class="checkbox">
                  <input type="checkbox"  name="course2" value="<%= dados.areasDeInteresse.find(x => x == 'Internet das Coisas (IoT)') ? 'x' : ''%>"/><span></span>
                  <div>
                  <strong>Internet das Coisas (IoT)</strong></div>
                </label>
                <label class="checkbox">
                  <input type="checkbox"  name="course4" value="<%= dados.areasDeInteresse.find(x => x == 'Segurança da Informação') ? 'x' : ''%>"/><span></span>
                  <div>
                  <strong>Segurança da Informação</strong>
                </div>
                </label>
              </div>
            </div>
          </div>

This is the Backend:

dadosLinhas.push([
      insc.nome,
      insc.cpf,
      insc.email,
      insc.situacao,
      insc.numero,
      moment(insc.createdAt).format('DD/MM/YYYY'),
      insc.formacaoAcademica.split('(').join('#').split(')').join('#'),
      insc.endereco_endereco,
      insc.endereco_numero,
      insc.endereco_complemento,
      insc.endereco_bairro,
      insc.endereco_cidade,
      insc.endereco_cep,
      insc.endereco_uf,
      '' + (insc.areasDeInteresse.find(x => x == 'Big Data') ? 'x' : ''),
      '' + (insc.areasDeInteresse.find(x => x == 'Cloud Computing') ? 'x' : ''),
      '' + (insc.areasDeInteresse.find(x => x == 'Inteligência Artificial') ? 'x' : ''),
      '' + (insc.areasDeInteresse.find(x => x == 'Internet das Coisas (IoT)') ? 'x' : ''),
      '' + (insc.areasDeInteresse.find(x => x == 'Segurança da Informação') ? 'x' : ''),
      '' + (insc.redesSociais.find(x => x.tipo == 'Facebook' && x.endereco != '')
        ? insc.redesSociais.find(x => x.tipo == 'Facebook' && x.endereco != '').endereco : ''),
      '' + (insc.redesSociais.find(x => x.tipo == 'Instagram' && x.endereco != '')
        ? insc.redesSociais.find(x => x.tipo == 'Instagram' && x.endereco != '').endereco : ''),
      '' + (insc.redesSociais.find(x => x.tipo == 'LinkedIn' && x.endereco != '')
        ? insc.redesSociais.find(x => x.tipo == 'LinkedIn' && x.endereco != '').endereco : ''),
      '' + (insc.redesSociais.find(x => x.tipo == 'Twitter' && x.endereco != '')
        ? insc.redesSociais.find(x => x.tipo == 'Twitter' && x.endereco != '').endereco : ''),
      '' + (insc.redesSociais.find(x => x.tipo == 'WhatsApp' && x.endereco != '')
        ? insc.redesSociais.find(x => x.tipo == 'WhatsApp' && x.endereco != '').endereco : '')
    ]);
  }

  • Solved: I was putting the JS code inside the "value" tag; it should be put before: <input type="checkbox" name="course3" <%= data.areasDeInteresse.find(x => x == 'Big Data') ? 'checked' : '%> value="Big Data"/><span></span> <div> .

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.