Tengo una función que toma un json y crea una tabla dinámicamente. Aquí está el json:

     var myContacts = [{
    "owner": "swapneil",
    "fleet_name": "RancorService",
    "creation_date": "09-03-2020",
    "environment": "RancorService/JP",
    "vip_port": 80,
    "partition": "YES",
    "protocol": "HTTP",
    "monitor": "Consistent (http-ping)",
    "lbset": "Consistent",
    "predictor": "Consistent",
    "spillover": "Consistent",
    "vip_cka": "Consistent :(NO)",
    "max_conns": "Consistent : (36)",
    "vip_cipher": null,
    "vip_cip": "Consistent",
    "vip_tier": "Consistent(Tier1)",
    "vip_siloed": "Consistent(Non-SILOED)",
    "vip_globalized": "Consistent(Non-GLOBALIZED)",
    "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
    "vip_retail_tag": "Consistent(RETAIL_TAG)",
    "down_stat_flush": "Consistent :(ENABLED)",
    "vip_type": "Consistent (BACKEND)",
    "server_port": "Consistent",
    "vip_server_timeout": "Consistent",
    "vip_client_timeout": "Consistent",
    "persistent_method": "Consistent",
    "persistent_timeout": "Consistent"

  },
  {
    "owner": "swapneil",
    "fleet_name": "RancorService",
    "creation_date": "09-03-2020",
    "environment": "RancorService/JP",
    "vip_port": 443,
    "partition": "YES",
    "protocol": "TCP",
    "monitor": "NC",
    "lbset": "NC (>1 Vip's in same LB)",
    "predictor": "NC (leastconns,ROUNDROBINSHOULD BE ROUNDROBIN)",
    "spillover": "Consistent",
    "vip_cka": "Consistent :(NO)",
    "max_conns": "Consistent : (9000)",
    "vip_cipher": null,
    "vip_cip": "Consistent",
    "vip_tier": "Consistent(Non-Tier1)",
    "vip_siloed": "Consistent(Non-SILOED)",
    "vip_globalized": "Consistent(Non-GLOBALIZED)",
    "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
    "vip_retail_tag": "Consistent(RETAIL_TAG)",
    "down_stat_flush": "Consistent :(ENABLED)",
    "vip_type": "Consistent (BACKEND)",
    "server_port": "Consistent",
    "vip_server_timeout": "Consistent",
    "vip_client_timeout": "Consistent",
    "persistent_method": "Consistent",
    "persistent_timeout": "Consistent"

  },
  {
    "owner": "swapneil",
    "fleet_name": "RegionAwareBaseLayer",
    "creation_date": "09-03-2020",
    "environment": "RegionAwareBaseLayer/NA",
    "vip_port": 80,
    "partition": "YES",
    "protocol": "HTTP",
    "monitor": "Consistent (http-ping)",
    "lbset": "Consistent",
    "predictor": "Consistent",
    "spillover": "Consistent",
    "vip_cka": "Consistent :(NO)",
    "max_conns": "Consistent : (56)",
    "vip_cipher": null,
    "vip_cip": "Consistent",
    "vip_tier": "NC : >1 VIP's MISSING TIER-1 TAG",
    "vip_siloed": "Consistent(Non-SILOED)",
    "vip_globalized": "Consistent(GLOBALIZED)",
    "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
    "vip_retail_tag": "Consistent(RETAIL_TAG)",
    "down_stat_flush": "Consistent :(ENABLED)",
    "vip_type": "Consistent (BACKEND)",
    "server_port": "Consistent",
    "vip_server_timeout": "Consistent",
    "vip_client_timeout": "Consistent",
    "persistent_method": "Consistent",
    "persistent_timeout": "Consistent"

  },
  {
    "owner": "swapneil",
    "fleet_name": "RegionAwareBaseLayer",
    "creation_date": "09-03-2020",
    "environment": "RegionAwareBaseLayer/NA",
    "vip_port": 443,
    "partition": "NO",
    "protocol": "TCP",
    "monitor": "Consistent (ssl-ping)",
    "lbset": "Consistent",
    "predictor": "NC :SHOULD BE ROUNDROBIN",
    "spillover": "Consistent",
    "vip_cka": "NC : SHOULD BE DISABLED (YES)",
    "max_conns": "Consistent : (9000)",
    "vip_cipher": null,
    "vip_cip": "Consistent",
    "vip_tier": "Consistent(Tier1)",
    "vip_siloed": "Consistent(Non-SILOED)",
    "vip_globalized": "Consistent(Non-GLOBALIZED)",
    "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
    "vip_retail_tag": "Consistent(RETAIL_TAG)",
    "down_stat_flush": "Consistent :(ENABLED)",
    "vip_type": "Consistent (BACKEND)",
    "server_port": "Consistent",
    "vip_server_timeout": "Consistent",
    "vip_client_timeout": "Consistent",
    "persistent_method": "Consistent",
    "persistent_timeout": "Consistent"

  },
  {
    "owner": "swapneil",
    "fleet_name": "RegionMappingService",
    "creation_date": "09-03-2020",
    "environment": "RegionMappingService/EU",
    "vip_port": 80,
    "partition": "YES",
    "protocol": "HTTP",
    "monitor": "Consistent (http-ping)",
    "lbset": "Consistent",
    "predictor": "Consistent",
    "spillover": "Consistent",
    "vip_cka": "Consistent :(NO)",
    "max_conns": "Consistent : (16)",
    "vip_cipher": null,
    "vip_cip": "Consistent",
    "vip_tier": "Consistent(Tier1)",
    "vip_siloed": "Consistent(Non-SILOED)",
    "vip_globalized": "Consistent(Non-GLOBALIZED)",
    "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
    "vip_retail_tag": "Consistent(RETAIL_TAG)",
    "down_stat_flush": "Consistent :(ENABLED)",
    "vip_type": "Consistent (BACKEND)",
    "server_port": "Consistent",
    "vip_server_timeout": "Consistent",
    "vip_client_timeout": "Consistent",
    "persistent_method": "Consistent",
    "persistent_timeout": "Consistent"

  },
  {
    "owner": "swapneil",
    "fleet_name": "RegionMappingService",
    "creation_date": "09-03-2020",
    "environment": "RegionMappingService/JP",
    "vip_port": 443,
    "partition": "YES",
    "protocol": "TCP",
    "monitor": "NC",
    "lbset": "NC (>1 Vip's in same LB)",
    "predictor": "NC :SHOULD BE ROUNDROBIN",
    "spillover": "Consistent",
    "vip_cka": "Consistent :(NO)",
    "max_conns": "Consistent : (9000)",
    "vip_cipher": null,
    "vip_cip": "Consistent",
    "vip_tier": "Consistent(Non-Tier1)",
    "vip_siloed": "Consistent(Non-SILOED)",
    "vip_globalized": "Consistent(Non-GLOBALIZED)",
    "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
    "vip_retail_tag": "Consistent(RETAIL_TAG)",
    "down_stat_flush": "Consistent :(ENABLED)",
    "vip_type": "Consistent (BACKEND)",
    "server_port": "Consistent",
    "vip_server_timeout": "Consistent",
    "vip_client_timeout": "Consistent",
    "persistent_method": "Consistent",
    "persistent_timeout": "Consistent"

  }
];

Y aquí está la función:

   function generateDynamicTable(myContacts) {
  var noOfContacts = myContacts.length;

  if (noOfContacts > 0) {


    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");
    table.style.width = '100%';
    table.setAttribute('border', '1');
    table.setAttribute('cellspacing', '0');
    table.setAttribute('id','example');
    table.setAttribute('class', 'stripe row-border order-column');
    table.setAttribute('cellpadding', '5');



    var col = []; // define an empty array
    for (var i = 0; i < noOfContacts; i++) {
      for (var key in myContacts[i]) {
        if (col.indexOf(key) === -1) {
          col.push(key);
        }
      }
    }

    // CREATE TABLE HEAD .
    var tHead = document.createElement("thead");


    // CREATE ROW FOR TABLE HEAD .
    var hRow = document.createElement("tr");

    // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
    for (var i = 0; i < col.length; i++) {
      var th = document.createElement("th");
      th.innerHTML = col[i];
      hRow.appendChild(th);
    }
    tHead.appendChild(hRow);
    table.appendChild(tHead);

    // CREATE TABLE BODY .
    var tBody = document.createElement("tbody");

    // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
    for (var i = 0; i < noOfContacts; i++) {

      var bRow = document.createElement("tr"); // CREATE ROW FOR EACH RECORD


      for (var j = 0; j < col.length; j++) {
        var td = document.createElement("td");
        var tempVal = (myContacts[i][col[j]] != null) ? myContacts[i][col[j]].toString() : "";
        td.innerHTML = tempVal;
        if (tempVal.startsWith("Consistent")||tempVal.startsWith("MAX-CONNS")) {
          td.innerHTML = 'Consistent';
        }
        if (tempVal.startsWith("NC")) {
          td.innerHTML = '';
          var a = document.createElement('a');
          var linkText = document.createTextNode("Non Consistent");
          a.appendChild(linkText);
          a.title = "Check details";
          a.href = "http://example.com";
          td.appendChild( a );
        }

        bRow.appendChild(td);

        //codes for highlighting row inserted here


      }
      tBody.appendChild(bRow)

    }
    table.appendChild(tBody);
    var divContainer = document.getElementById("demo");
    divContainer.innerHTML ="";
    divContainer.appendChild(table);
}

}

Así es como se ve la tabla: captura de pantalla de la tabla generada

Entonces, en la tabla, hice hipervínculos de los valores que comienzan con 'NC' y lo cambié a 'No coherente'.

Ahora quiero que al hacer clic en el enlace (No coherente), obtenga los valores de 'vip_port' y 'environment' de la misma fila. Por ejemplo: si hago clic en 'No coherente' de la columna 'monitor' (segunda fila), obtengo el valor:

{
"clicked":"monitor",
"vip_port:443,
"environment":"RancorService/JP"
} 

Tengo que tratar de hacer una solución, pero no una forma de obtener valores de una tabla que ya está construida. Por favor ayuda a lograr eso.

0
Himanshu 1 may. 2020 a las 08:50

2 respuestas

 

var myContacts = [{
    "owner": "swapneil",
    "fleet_name": "RancorService",
    "creation_date": "09-03-2020",
    "environment": "RancorService/JP",
    "vip_port": 80,
    "partition": "YES",
    "protocol": "HTTP",
    "monitor": "Consistent (http-ping)",
    "lbset": "Consistent",
    "predictor": "Consistent",
    "spillover": "Consistent",
    "vip_cka": "Consistent :(NO)",
    "max_conns": "Consistent : (36)",
    "vip_cipher": null,
    "vip_cip": "Consistent",
    "vip_tier": "Consistent(Tier1)",
    "vip_siloed": "Consistent(Non-SILOED)",
    "vip_globalized": "Consistent(Non-GLOBALIZED)",
    "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
    "vip_retail_tag": "Consistent(RETAIL_TAG)",
    "down_stat_flush": "Consistent :(ENABLED)",
    "vip_type": "Consistent (BACKEND)",
    "server_port": "Consistent",
    "vip_server_timeout": "Consistent",
    "vip_client_timeout": "Consistent",
    "persistent_method": "Consistent",
    "persistent_timeout": "Consistent"

  },
  {
    "owner": "swapneil",
    "fleet_name": "RancorService",
    "creation_date": "09-03-2020",
    "environment": "RancorService/JP",
    "vip_port": 443,
    "partition": "YES",
    "protocol": "TCP",
    "monitor": "NC",
    "lbset": "NC (>1 Vip's in same LB)",
    "predictor": "NC (leastconns,ROUNDROBINSHOULD BE ROUNDROBIN)",
    "spillover": "Consistent",
    "vip_cka": "Consistent :(NO)",
    "max_conns": "Consistent : (9000)",
    "vip_cipher": null,
    "vip_cip": "Consistent",
    "vip_tier": "Consistent(Non-Tier1)",
    "vip_siloed": "Consistent(Non-SILOED)",
    "vip_globalized": "Consistent(Non-GLOBALIZED)",
    "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
    "vip_retail_tag": "Consistent(RETAIL_TAG)",
    "down_stat_flush": "Consistent :(ENABLED)",
    "vip_type": "Consistent (BACKEND)",
    "server_port": "Consistent",
    "vip_server_timeout": "Consistent",
    "vip_client_timeout": "Consistent",
    "persistent_method": "Consistent",
    "persistent_timeout": "Consistent"

  },
  {
    "owner": "swapneil",
    "fleet_name": "RegionAwareBaseLayer",
    "creation_date": "09-03-2020",
    "environment": "RegionAwareBaseLayer/NA",
    "vip_port": 80,
    "partition": "YES",
    "protocol": "HTTP",
    "monitor": "Consistent (http-ping)",
    "lbset": "Consistent",
    "predictor": "Consistent",
    "spillover": "Consistent",
    "vip_cka": "Consistent :(NO)",
    "max_conns": "Consistent : (56)",
    "vip_cipher": null,
    "vip_cip": "Consistent",
    "vip_tier": "NC : >1 VIP's MISSING TIER-1 TAG",
    "vip_siloed": "Consistent(Non-SILOED)",
    "vip_globalized": "Consistent(GLOBALIZED)",
    "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
    "vip_retail_tag": "Consistent(RETAIL_TAG)",
    "down_stat_flush": "Consistent :(ENABLED)",
    "vip_type": "Consistent (BACKEND)",
    "server_port": "Consistent",
    "vip_server_timeout": "Consistent",
    "vip_client_timeout": "Consistent",
    "persistent_method": "Consistent",
    "persistent_timeout": "Consistent"

  },
  {
    "owner": "swapneil",
    "fleet_name": "RegionAwareBaseLayer",
    "creation_date": "09-03-2020",
    "environment": "RegionAwareBaseLayer/NA",
    "vip_port": 443,
    "partition": "NO",
    "protocol": "TCP",
    "monitor": "Consistent (ssl-ping)",
    "lbset": "Consistent",
    "predictor": "NC :SHOULD BE ROUNDROBIN",
    "spillover": "Consistent",
    "vip_cka": "NC : SHOULD BE DISABLED (YES)",
    "max_conns": "Consistent : (9000)",
    "vip_cipher": null,
    "vip_cip": "Consistent",
    "vip_tier": "Consistent(Tier1)",
    "vip_siloed": "Consistent(Non-SILOED)",
    "vip_globalized": "Consistent(Non-GLOBALIZED)",
    "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
    "vip_retail_tag": "Consistent(RETAIL_TAG)",
    "down_stat_flush": "Consistent :(ENABLED)",
    "vip_type": "Consistent (BACKEND)",
    "server_port": "Consistent",
    "vip_server_timeout": "Consistent",
    "vip_client_timeout": "Consistent",
    "persistent_method": "Consistent",
    "persistent_timeout": "Consistent"

  },
  {
    "owner": "swapneil",
    "fleet_name": "RegionMappingService",
    "creation_date": "09-03-2020",
    "environment": "RegionMappingService/EU",
    "vip_port": 80,
    "partition": "YES",
    "protocol": "HTTP",
    "monitor": "Consistent (http-ping)",
    "lbset": "Consistent",
    "predictor": "Consistent",
    "spillover": "Consistent",
    "vip_cka": "Consistent :(NO)",
    "max_conns": "Consistent : (16)",
    "vip_cipher": null,
    "vip_cip": "Consistent",
    "vip_tier": "Consistent(Tier1)",
    "vip_siloed": "Consistent(Non-SILOED)",
    "vip_globalized": "Consistent(Non-GLOBALIZED)",
    "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
    "vip_retail_tag": "Consistent(RETAIL_TAG)",
    "down_stat_flush": "Consistent :(ENABLED)",
    "vip_type": "Consistent (BACKEND)",
    "server_port": "Consistent",
    "vip_server_timeout": "Consistent",
    "vip_client_timeout": "Consistent",
    "persistent_method": "Consistent",
    "persistent_timeout": "Consistent"

  },
  {
    "owner": "swapneil",
    "fleet_name": "RegionMappingService",
    "creation_date": "09-03-2020",
    "environment": "RegionMappingService/JP",
    "vip_port": 443,
    "partition": "YES",
    "protocol": "TCP",
    "monitor": "NC",
    "lbset": "NC (>1 Vip's in same LB)",
    "predictor": "NC :SHOULD BE ROUNDROBIN",
    "spillover": "Consistent",
    "vip_cka": "Consistent :(NO)",
    "max_conns": "Consistent : (9000)",
    "vip_cipher": null,
    "vip_cip": "Consistent",
    "vip_tier": "Consistent(Non-Tier1)",
    "vip_siloed": "Consistent(Non-SILOED)",
    "vip_globalized": "Consistent(Non-GLOBALIZED)",
    "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
    "vip_retail_tag": "Consistent(RETAIL_TAG)",
    "down_stat_flush": "Consistent :(ENABLED)",
    "vip_type": "Consistent (BACKEND)",
    "server_port": "Consistent",
    "vip_server_timeout": "Consistent",
    "vip_client_timeout": "Consistent",
    "persistent_method": "Consistent",
    "persistent_timeout": "Consistent"

  }
];

function registerClick(contact) {
  return () => {
    const {environment, vip_port} = contact
    alert(environment + vip_port )
  }
  
}
function generateDynamicTable(myContacts) {
  var noOfContacts = myContacts.length;

  if (noOfContacts > 0) {


    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");
    table.style.width = '100%';
    table.setAttribute('border', '1');
    table.setAttribute('cellspacing', '0');
    table.setAttribute('id','example');
    table.setAttribute('class', 'stripe row-border order-column');
    table.setAttribute('cellpadding', '5');



    var col = []; // define an empty array
    for (var i = 0; i < noOfContacts; i++) {
      for (var key in myContacts[i]) {
        if (col.indexOf(key) === -1) {
          col.push(key);
        }
      }
    }

    // CREATE TABLE HEAD .
    var tHead = document.createElement("thead");


    // CREATE ROW FOR TABLE HEAD .
    var hRow = document.createElement("tr");

    // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
    for (var i = 0; i < col.length; i++) {
      var th = document.createElement("th");
      th.innerHTML = col[i];
      hRow.appendChild(th);
    }
    tHead.appendChild(hRow);
    table.appendChild(tHead);

    // CREATE TABLE BODY .
    var tBody = document.createElement("tbody");

    // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
    for (var i = 0; i < noOfContacts; i++) {

      var bRow = document.createElement("tr"); // CREATE ROW FOR EACH RECORD


      for (var j = 0; j < col.length; j++) {
        var td = document.createElement("td");
        var tempVal = (myContacts[i][col[j]] != null) ? myContacts[i][col[j]].toString() : "";
        td.innerHTML = tempVal;
        if (tempVal.startsWith("Consistent")||tempVal.startsWith("MAX-CONNS")) {
          td.innerHTML = 'Consistent';
        }
        if (tempVal.startsWith("NC")) {
          td.innerHTML = '';
          var a = document.createElement('a');
          var linkText = document.createTextNode("Non Consistent");
          a.appendChild(linkText);
          a.title = "Check details";
          a.href = "#";
          a.onclick = ((clickedContact) => {
             return () => {
               alert(clickedContact.environment + clickedContact.vip_port)
             }
          })(myContacts[i])
          td.appendChild( a );
        }

        bRow.appendChild(td);

        //codes for highlighting row inserted here


      }
      tBody.appendChild(bRow)

    }
    table.appendChild(tBody);
    var divContainer = document.getElementById("demo");
    divContainer.innerHTML ="";
    divContainer.appendChild(table);
}
}
generateDynamicTable(myContacts)
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width">
  <div id="demo"></div>
</head>
<body>

</body>
</html>

Todo lo que necesita hacer es registrarse haciendo clic en su etiqueta 'a' y pasar el contacto actual:

a.href = "#";
a.onclick = ((column, clickedContact) => {
     return () => {
        //do your fetch here
        alert(column +" " + clickedContact.environment + " " + clickedContact.vip_port)
     }
})(col[j], myContacts[i])
0
Community 1 may. 2020 a las 11:39
a.href = "#";
a.onclick = ((clickedContact,col) => {
     return () => {
        alert(col +" "+clickedContact.environment +" "+ clickedContact.vip_port)
     }
})(myContacts[i],col[j])

Gracias Rikesh Subedi

0
Himanshu 1 may. 2020 a las 10:46