how to apply a mask to an item coming from an API with Javascript

I have a basic CRUD situation, where in the form, when I send the data, it inserts the mask normally, and when sending it to my local API, I format it and leave it in numeric format. But how am I going to apply the mask again on the item being displayed in a grid?

in my form, is like this

enter image description here

and on the grid, it displays like this

enter image description here

now, I need to apply the mask again, but on the grid that is showing. How to make?

to show the items on the grid, I am doing this via Javascript:

const exibirEmpresas = (u) => {
  Array.from(u).forEach((lista) => {
    dadosEmpresa += `
        <tr>
        <td class="idEmp" id="idEmp">${lista.idEmpresa}</td>
        <td class="nomeEmp">${lista.nomeEmpresa}</td>
        <td class="emailCad">${lista.email}</td>
        <td class="cnpjCad" id="cnpjList">${lista.cnpj}</td>
        <td class="dataCadastroCad">${lista.dataCadastro}</td>
        <td class="dataAtualizacaoCad">${lista.dataAtualizacao}</td>
        <td>
          <button id="atualiza-empresa" onclick="editItem(${lista.idEmpresa})">Editar</button>
        </td>
        <td>
          <button class="deletebtn" onclick="removeItem(${lista.idEmpresa})">Excluir</button>
        </td>
    </tr>
        `;
  });
  listaEmpresa.innerHTML = dadosEmpresa;
};

// GET

fetch(urlAPI)
  .then((s) => s.json())
  .then((dados) => exibirEmpresas(dados));

Answer

I understand that you are essentially looking for a way to turn a 14-digit string like “19879847984784” to “19.879.847/9847-84”.

You can add this JavaScript code to your script. The HTML is just an example with hard coded values.

function formatCnpj() {
    for (let td of document.querySelectorAll(".cnpjCad")) {
        td.textContent = td.textContent
               .replace(/D/g, "")
               .replace(/(..)(...)(...)(....)/, "$1.$2.$3/$4-");
    }
}

formatCnpj();

table { border-collapse: collapse }
td, th { border: 1px solid }

<table>
  <tr>
    <td class="idEmp" id="idEmp">28</td>
    <td class="nomeEmp">John Larkin</td>
    <td class="emailCad">john.larkin@x.com</td>
    <td class="cnpjCad" id="cnpjList">19961423596110</td>
    <td class="dataCadastroCad">2000-09-09</td>
    <td class="dataAtualizacaoCad">2020-09-09</td>
    <td>
      <button id="atualiza-empresa" onclick="editItem(${lista.idEmpresa})">Editar</button>
    </td>
    <td>
      <button class="deletebtn" onclick="removeItem(${lista.idEmpresa})">Excluir</button>
    </td>
  </tr>
  <tr>
    <td class="idEmp" id="idEmp">12</td>
    <td class="nomeEmp">Helene Park</td>
    <td class="emailCad">helene.park@n.com</td>
    <td class="cnpjCad" id="cnpjList">19879847984784</td>
    <td class="dataCadastroCad">2000-01-01</td>
    <td class="dataAtualizacaoCad">2020-01-01</td>
    <td>
      <button id="atualiza-empresa" onclick="editItem(${lista.idEmpresa})">Editar</button>
    </td>
    <td>
      <button class="deletebtn" onclick="removeItem(${lista.idEmpresa})">Excluir</button>
    </td>
  </tr>
</table>

Advertisement

Answer