Block more than one HTTP call

Question

I make a call via API to an application service, which returns some information from my product. It is working OK, however, whenever I click on the button, the table is fed, or is done apend of all content. I want the call to be made only once or that even if I click the button several times, the append is not done if I already have the information.

FIRST CLICK

SECOND CLICK - Already increased

Follow the HTML and Javascript codes.

You can help in a solution??

//////////////////////////////////////////////////////////////////////////////////////////////BOTÃO AMBIENTE//////////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function() {
  $("#button-buscar-licencas-ambiente").click(function(){
    var urlapi = '';
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", urlapi, false);
    xhttp.send();
    var obj = JSON.parse(xhttp.responseText);
    var data_map = new Map();
    var index = 0;
      var objLength = obj.length;
      for (var i = 0; i < objLength; i++) {
          if(data_map.has(obj[i].hostGroup.name)) {
            data_map.set(obj[i].hostGroup.name, data_map.get(obj[i].hostGroup.name) + +obj[i].consumedHostUnits);
            } 
          else {
                data_map.set(obj[i].hostGroup.name, +obj[i].consumedHostUnits);
            }
        }
    const objConverted = Object.fromEntries(data_map);      
    var myJSON = JSON.stringify(objConverted); 
    data_map.forEach(montaTabelaLicencas);
    event.preventDefault();  
  });
});



function montaTabelaLicencas(licencasConsumidas, hostGroup) {

  var newRow = $('<tr class="linha-table">');
      var cols = "";

        cols += '<td class="hostgroup" id="hostgroup">' + hostGroup + '</td>';
        cols += '<td class="quantidade" id="quantidade">' + licencasConsumidas + '</td>';

      newRow.append(cols);

       $("#table-licencas").append(newRow); 
       return false; 
};   


  $(document).ready(function() {
    $("#button-buscar-licencas-ambiente").click(function(){   
        let tdsValores = document.querySelectorAll('.quantidade')
        let total = 0 
            for (let i = 0; i < tdsValores.length; i++) {
                let valor = parseFloat(tdsValores[i].textContent)
                total = total + valor}
        document.getElementById("div-mostra-total-licencas").innerHTML = "Licenças Utilizadas: " + total;
    });
});

//////////////////////////////////////////////////////////////////////////////////////////////BOTÃO SERVIDOR//////////////////////////////////////////////////////////////////////////////////////////////   

$(document).ready(function() {
  $("#button-buscar-licencas-servidor").click(function(){
    var urlapi = '';
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", urlapi, false);
    xhttp.send();
    var obj = JSON.parse(xhttp.responseText);
    var data_map = new Map();
    var index = 0;
      var objLength = obj.length;
      for (var i = 0; i < objLength; i++) {
          if(data_map.has(obj[i].displayName)) {
            data_map.set(obj[i].displayName, data_map.get(obj[i].displayName) + +obj[i].consumedHostUnits);
            } 
          else {
                data_map.set(obj[i].displayName, +obj[i].consumedHostUnits);
            }
        }
    const objConverted = Object.fromEntries(data_map);      
    var myJSON = JSON.stringify(objConverted); 
    data_map.forEach(montaTabelaLicencas);
    event.preventDefault();  
  });
});



function montaTabelaLicencas(licencasConsumidas, displayName) {

  var newRow = $('<tr class="linha-table">');
      var cols = "";

        cols += '<td class="hostgroup" id="hostgroup">' + displayName + '</td>';
        cols += '<td class="quantidade" id="quantidade">' + licencasConsumidas + '</td>';

      newRow.append(cols);

       $("#table-licencas").append(newRow); 
       return false; 
};   


  $(document).ready(function() {
    $("#button-buscar-licencas-servidor").click(function(){   
        let tdsValores = document.querySelectorAll('.quantidade')
        let total = 0 
            for (let i = 0; i < tdsValores.length; i++) {
                let valor = parseFloat(tdsValores[i].textContent)
                total = total + valor}
        document.getElementById("div-mostra-total-licencas").innerHTML = "Licenças Utilizadas: " + total;
    });
});

@media only screen and (max-device-width: 1400px) {
}
/*Propriedade do html*/
html {
    height: 100%;
}

/*Propriedade da div do header*/
header {
    height: 52px;
}
/*Propriedade customização do nav*/
.nav-custom {
    font-size: 15px;
}
/*Propriedade da imagem do logo no topo*/
#imagem-logo-dynatrace {
    margin-top: -5px;
}
/*Propriedade do body*/
body {
    padding-top: 60px;
    background: #ffffff;
    font-family: BerninaSans, Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
}
#div-main{
    background-color: white;
    width: 98%;
    margin-left: 1%;

    height: 90%;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 90%;
}

#div-botoes-pesquisa{
    background-color: white;
    width: 29%;
    margin-left: 1%;
    margin-top: 1%;
}

#div-mostra-total-licencas{
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 3px;
    background-color: #E5E5E5;
    text-align: center;
    width: 10%;
    margin-left: 1%;
    margin-top: 1%;
    font-weight: bold;
}

#div-table-licencas{
    background-color: white;
    margin-left: 1%;
    width: 80%;
    margin-top: 1%;
    text-align: center;
}

.linha-titulo-tabela{
    text-align: center;
    font-size: 120%;
    
}

<!DOCTYPE html>
<!-- Inicio do html -->
<html lang="pt">
<!-- Inicio do head -->

<head>
    <meta charset="utf-8">
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
    <link rel="icon" type="imagem/png" href="images/dynatrace.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- CSS Customizado -->
    <link href="css/ambiente-monitorado-3.css" rel="stylesheet">
</head>
<!-- Fim do head -->
<!-- Inicio do body -->

<body>    
    <header>
        <title>Dynatrace Managed</title>
        <!-- Inicio do nav fixado no topo-->
        <div id="nav">
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <!-- Inicio div container-fluid -->
                <div class="container-fluid">
                    <div class="navbar-header">
                        <!-- Imagem do logo da Dynatrace a esquerda -->
                        <a class="navbar-brand" href="#"><img id="imagem-logo-dynatrace" src="images/dynatrace.png" width="30px" height="30px" alt="Logo Principal" title="Logo Dynatrace"></a>
                    </div>
                    <!-- Inicio ul nav com opções das páginas -->
                    <ul class="nav navbar-nav nav-custom">
                        <li><a href="index.html">Home</a></li>
                        <li class="active"><a href="ambiente-monitorado.html">Ambientes Monitorados</a>
                        <li><a href="arquitetura.html">Arquitetura Dynatrace</a></li>
                        <li><a href="#">Downtime</a></li>
                        <li><a href="#">Indicadores</a></li>
                        <li><a href="como-funciona.html">Licenças</a></li>
                        <li><a href="#">Métricas</a></li>
                    </ul>
                    <!-- Fim ul nav com opções das páginas -->
                    <!-- Inicio ul nav da diretia, com search e login -->
                    <ul class="nav navbar-nav navbar-right nav-custom">
                        <!-- Icone e botão login -->
                        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                        <!-- Inicio form do search -->
                        <form class="navbar-form navbar-left" action="/action_page.php">
                            <div class="input-group">
                                <!-- Input do search -->
                                <input type="text" class="form-control" placeholder="Search" name="search">
                                <div class="input-group-btn">
                                    <!-- Botão de submit do search -->
                                    <button class="btn btn-default" type="submit">
                                        <!-- Icone do search -->
                                        <i class="glyphicon glyphicon-search"></i>
                                    </button>
                                </div>
                                <!-- Fim div input-group-btn -->
                            </div>
                            <!-- Fim div input-group -->
                        </form>
                        <!-- Fim form do search -->
                    </ul>
                    <!-- Fim ul nav da diretia, com search e login -->
                </div>
                <!-- Fim div container-fluid -->
            </nav>
        </div>
        <!-- Fim do nav fixado no topo-->
    </header>     
    <div id="div-main">
        <div id="div-botoes-pesquisa">
            <button class="button-title btn btn-info" id="button-buscar-licencas-ambiente" data-toggle="button" aria-pressed="false"><i class="fas fa-bezier-curve fa-2x" aria-hidden="true" title="Por Ambiente"></i></button>
            <button class="button-title btn btn-info" id="button-buscar-licencas-servidor"><i class="fas fa-server fa-2x" aria-hidden="true" title="Por Servidor"></i></button><br><br>
            <input class="form-control mr-sm-2" type="text" id="input-search-host-group" name="filtro" placeholder="Filtrar"> 
        </div>
        <div id="div-mostra-total-licencas"></div>
        <div id="div-table-licencas" class="div-table-licencas">
            <table class="table table-striped table-hover table-bordered" id="table-licencas">
                <thead>
                    <tr>
                        <th class="linha-titulo-tabela">Ambiente / Servidor</th>
                        <th class="linha-titulo-tabela">Host Units</th>
                    </tr>
                </thead>
                <tbody id="table-body">
                </tbody>
            </table>
        </div>
    </div> 

    <script src="js/api-get-hosts.js"></script>
    <script src="js/disable-button.js"></script>
    <script src="js/filtrar-search-licencas.js"></script>
</body>
<!-- Fim do body -->
</html>
<!-- Fim do html -->

Answer 1

the table assembly would look like this, already adding up the values. I took the other features of the event just to demonstrate the part of the listing :)

$("#button-buscar-licencas-servidor").click(function(){

        //faz a requisição
        var urlapi = '';
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", urlapi, false);
        xhttp.send();
        var obj = JSON.parse(xhttp.responseText);
        
        //aqui passa o JSON como parâmetro
        montaTabelaLicencas(obj)
  });

function montaTabelaLicencas(obj) { 
    
    let rows = '';
    let total = 0;

    //percorre o JSON
    for(let item of obj){

        //soma o total
        total += parseFloat(item.licencasConsumidas);

        //para cada chave do JSON adiciona a linha em rows com os dados
        rows += `<tr class="linha-table"> 
                    <td class="hostgroup" id="hostgroup">${item.hostGroup}</td>
                    <td class="quantidade" id="quantidade">${item.licencasConsumidas}</td>
                </tr>` 
    }

    //adiciona o html do total
    $("#div-mostra-total-licencas").html("Licenças Utilizadas: " + total);

    //adiciona todas as <tr>
    $("#table-licencas").html(rows); 
    return false; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

Answer 2

Hello, from what I understand of your problem, by clicking more than once on the button your code is adding up the value that already existed, right?

Note that there are two events in the "#button-fetch-license-server" element, one of them is to make the request and the other to add the values. in the function 'montaTabelaLicencas()' Voce uses the function 'append()', use 'html()' because then you will be "replacing" the existing elements and your second event will not traverse the obsolete elements again adding up. I advise adding up the values right through the object to assemble its table, thus avoiding another loop and another selection of elements. Also use only one event '$(Document). ready()', using it to call the necessary functions. I hope I’ve helped :)