var urlapi = "http://xxxxx.xxxx";

// var len = myJSON.hostGroup.name.length, aryHostGroup = [];

​

function fazerRequisicao(){

  var url = urlapi + document.getElementById("hostgroup").value;

  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;

}

​

​

// 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();

​