Ajuda - Array na DIV

Rodrigo Biaggio · Abril 8, 2020

Senhores(a), por favor, alguém consegue me ajudar a entender como posso fazer para colocar o conteúdo abaixo, dentro de uma DIV, separando ou criando como se fosse uma tabela com o campo HostGroup e Licenças?

{"GFUnificado":14,"APIGateway":22,"OSBSegregado1":202,"Portal":14,"OAM":30,"MicroServicos":68,"Loja":58.5,"60-Lojas":46,"-Callcenter":37,"360-Dealers":24,"SOAMecsol":30,"MeuEmpresas":40,"OSBFarm4":89,"Prisma":8,"EricssonRevenueManager":50.75,"N":80,"Atl":10,"OSBEAI":2,"Next":208.5}

Segue meu código:

<!DOCTYPE html>

<html lang="pt-br">
    <title>API Management</title>
    <head>
        <meta charset="8">
    </head>
    <body>
        <script>
            var urlapi = 'http://xxxxx.xxxx;   
            function fazerRequisicao(){
               var url = urlapi + document.getElementById('hostgroup').value;
               //var url = urlapi;
               var xhttp = new XMLHttpRequest();
               xhttp.open("GET", url, false);
               xhttp.send();
               var obj = JSON.parse(xhttp.responseText);
               var data_map = new Map();
               var index = 0;
               for (i = 0; i < obj.length; 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);
               document.getElementById("div-responsetext").innerHTML = myJSON;
            }
            var len = myJSON.hostGroup.name.length, aryHostGroup = [];
        </script>  
        <button onclick="fazerRequisicao();">Pesquisar</button>
        <input type="text" id="hostgroup" style="width: 100px;">
        <hr/>
        <div id="div-responsetext"></div>
    </body>
</html>

wanderval · Abril 9, 2020

eu fiz uma logica separada da sua da uma olhada e adapta a sua necessidade:

HTML:

<table id="producttable">
    <thead>
      <tr>
        <th>Group</th>
        <th>License</th>
      </tr>
    </thead>
    <tbody>
      <!-- existing data could optionally be included here -->
    </tbody>
  </table>

  <template id="productrow">
    <tr>
      <td class="group"></td>
      <td class="license"></td>
    </tr>
  </template>

JS:

// Build table dinamically
function buildTable() {
  let groups = mapObject(getMockResult());
  
  // Instancie a tabela com o HTML tbody e a row com o template
  var t = document.querySelector('#productrow');
  var td = t.content.querySelectorAll("td");
  
  for(var i = 0; i < groups.length; i++) {
    td[0].textContent = groups[i].name;
    td[1].textContent = groups[i].license;
    
    var tb = document.getElementsByTagName("tbody");
    var clone = document.importNode(t.content, true);
    tb[0].appendChild(clone);
  }
}

function mapObject(data) {
  return Object.entries(data).map(([name, license]) => ({name, license}));
}

function getMockResult() {
  return {
   "GFUnificado":14,
   "APIGateway":22,
   "OSBSegregado1":202,
   "Portal":14,
   "OAM":30,
   "MicroServicos":68,
   "Loja":58.5,
   "60-Lojas":46,
   "-Callcenter":37,
   "360-Dealers":24,
   "SOAMecsol":30,
   "MeuEmpresas":40,
   "OSBFarm4":89,
   "Prisma":8,
   "EricssonRevenueManager":50.75,
   "N":80,
   "Atl":10,
   "OSBEAI":2,
   "Next":208.5
  };
}
buildTable();