What is a promise in Javascript?

Question

raintrooper

Asked: 2020-07-13 15:33:26 +0800 CST 2020-07-13 15:33:26 +0800 CST 2020-07-13 15:33:26 +0800 CST

Create HTML Structure Dynamically with JavaScript

772

I am trying to create a structure, with 3 Json that I receive. The structure consists of Title, Subtitle and Details.

A Title can have several subtitles and a subtitle can have several details, like the following image:

Structure

For this the json bring the following data:

Json 1 Titulo:
IdPerspectiva, Perspectiva 

Json 2 Subtitulo:
IdPerspectiva, IdTipoDeIndicador,Nombre

Json 3 Detalles:
Nombre,IdTipoDeIndicador

So what I do is:

I generate all the Titles together with a div with the idPerspectiva
I generate the subtitles and with a innerHtmlreplacement the syntax of the one divgenerated in step 1, to add the subtitle, and I generate another one div, with the idTypeIndicator
I generate the details and innerHtmlreplace the syntax of the one divgenerated in step 2, to add the details

The problem I have is that the subtitles cannot be correctly related to the title, nor the details to the subtitle.

I don't know if using innerHtmldestroys the divone I'm adding the new syntax to.

The result is half, and in the console I can see the error:

FrmMetasDiarioEnergia.aspx:309 Uncaught TypeError: Cannot set property 'innerHTML' of null
    at Object.<anonymous> (FrmMetasDiarioEnergia.aspx:309)
    at Function.each (jquery.min.js:2)
    at Object.success (FrmMetasDiarioEnergia.aspx:294)
    at k (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at y (jquery.min.js:2)
    at XMLHttpRequest.d (jquery.min.js:2)

Structure Error

var encabezado = [{
  "IdPerspectiva": 1,
  "Nombre": "Perspectiva Financiera"
}, {
  "IdPerspectiva": 2,
  "Nombre": "Perspectiva Clientes"
}, {
  "IdPerspectiva": 3,
  "Nombre": "Perspectiva Procesos Internos"
}, {
  "IdPerspectiva": 4,
  "Nombre": "Perspectiva Aprendizaje y Crecimiento "
}];

var subtitulo = [{
  "IdTipoIndicador": 1,
  "Nombre": "Generar energía eficientemente",
  "IdPerspectiva": 1
}, {
  "IdTipoIndicador": 2,
  "Nombre": "Entregar energía a Comercialización, de buena calidad al menor costo",
  "IdPerspectiva": 1
}, {
  "IdTipoIndicador": 3,
  "Nombre": "Ejecutar los gastos alineados al presupuesto establecido",
  "IdPerspectiva": 1
}, {
  "IdTipoIndicador": 4,
  "Nombre": "Mantener un alto indicador de disponibilidad y confiabilidad en la generación de energía.",
  "IdPerspectiva": 2
}, {
  "IdTipoIndicador": 5,
  "Nombre": "Despachar según programa de venta de energía",
  "IdPerspectiva": 2
}, {
  "IdTipoIndicador": 6,
  "Nombre": "Proveer calidad de vapor a Fabrica de Azúcar para sus procesos",
  "IdPerspectiva": 2
}, {
  "IdTipoIndicador": 7,
  "Nombre": "Realizar una operación segura",
  "IdPerspectiva": 3
}, {
  "IdTipoIndicador": 8,
  "Nombre": "Mantener los equipos funcionando bajo las especificaciones técnicas",
  "IdPerspectiva": 3
}, {
  "IdTipoIndicador": 9,
  "Nombre": "Implementar una cultura de seguridad personal basada en principios y valores",
  "IdPerspectiva": 4
}, {
  "IdTipoIndicador": 10,
  "Nombre": "Registrar gestión de compras",
  "IdPerspectiva": 4
}, {
  "IdTipoIndicador": 11,
  "Nombre": "Cumplir con los requerimientos de Recurso humano para la operación",
  "IdPerspectiva": 4
}];

var detalles = [{
  "IdIndicador": 1,
  "Nombre": "Promedio Generación Bruta de KW por hora",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 2,
  "Nombre": "Promedio Generación Venta de KW por hora",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 3,
  "Nombre": "Ton de Carbón por hora",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 4,
  "Nombre": "Ton de Bagazo por hora",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 5,
  "Nombre": "KWh / Ton Carbón",
  "Calculo": "KWh Carbón / Ton Carbón",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 6,
  "Nombre": "KWh / Ton biomasa",
  "Calculo": "KWh Bagazo / Ton Bagazo",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 7,
  "Nombre": "Kw / Ton de vapor",
  "Calculo": "KWh Bruta / Ton Vapor",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 8,
  "Nombre": "Kw / Ton de agua DM ",
  "Calculo": "KWh Bruta / Ton Agua DM",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 9,
  "Nombre": "Flujo de vapor hora",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 10,
  "Nombre": "Flujo de agua de alimentación a la caldera",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 11,
  "Nombre": "BTU / Lb de carbón (Poder Calorifico)",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 12,
  "Nombre": "BTU / Lb de Biomasa (Poder Calorifico)",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 13,
  "Nombre": "Consumo de energía de auxiliares",
  "Calculo": "KWh Bruta - Kwh Venta",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 14,
  "Nombre": "Heat rate BTU / Kw",
  "Calculo": "[(Ton Carbón x 2204 x PoderCalorificoCarbón) + (Ton Bagazo x 2204 x PoderCalorificoBagazo)] / KWh Bruta",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 15,
  "Nombre": "Horas en línea por día",
  "Calculo": "",
  "IdTipoIndicador": 2
}, {
  "IdIndicador": 16,
  "Nombre": "Compra de energía",
  "Calculo": "",
  "IdTipoIndicador": 2
}, {
  "IdIndicador": 17,
  "Nombre": "Perdida de potencia en la línea",
  "Calculo": "(KWh Venta B4 + KWh Venta B3 - KWh Compra B4 - KWh Compra B3) - (KWh Venta PE - KWh Compra PE)",
  "IdTipoIndicador": 2
}, {
  "IdIndicador": 18,
  "Nombre": "Programa de generación Diario",
  "Calculo": "Generado / Programado * 100",
  "IdTipoIndicador": 2
}, {
  "IdIndicador": 19,
  "Nombre": "Ejecución de presupuesto Mano de Obra",
  "Calculo": "",
  "IdTipoIndicador": 3
}, {
  "IdIndicador": 20,
  "Nombre": "Ejecución de presupuesto Insumos",
  "Calculo": "",
  "IdTipoIndicador": 3
}, {
  "IdIndicador": 21,
  "Nombre": "Ejecución de presupuesto Servicios Externos",
  "Calculo": "",
  "IdTipoIndicador": 3
}, {
  "IdIndicador": 22,
  "Nombre": "Ejecución de presupuesto Servicios Internos",
  "Calculo": "",
  "IdTipoIndicador": 3
}, {
  "IdIndicador": 23,
  "Nombre": "Horas en línea por día.",
  "Calculo": "",
  "IdTipoIndicador": 4
}, {
  "IdIndicador": 24,
  "Nombre": "Programa de generación Diario.",
  "Calculo": "Generado / Programado * 100",
  "IdTipoIndicador": 5
}, {
  "IdIndicador": 25,
  "Nombre": "Flujo de vapor hora.",
  "Calculo": "",
  "IdTipoIndicador": 6
}, {
  "IdIndicador": 26,
  "Nombre": "Fatalidades",
  "Calculo": "Numero de fatalidades",
  "IdTipoIndicador": 7
}, {
  "IdIndicador": 27,
  "Nombre": "Accidentes registrados",
  "Calculo": "Numero de accidentes",
  "IdTipoIndicador": 7
}, {
  "IdIndicador": 28,
  "Nombre": "Colisiones vehiculares",
  "Calculo": "Numero de colisiones",
  "IdTipoIndicador": 7
}, {
  "IdIndicador": 29,
  "Nombre": "Suspensiones por lesiones laborales",
  "Calculo": "Suspendidos / Total de empleados * 100",
  "IdTipoIndicador": 7
}, {
  "IdIndicador": 30,
  "Nombre": "Llamadas de atención por faltas a la seguridad",
  "Calculo": "Llamadas de atención / Total de colaboradores",
  "IdTipoIndicador": 7
}, {
  "IdIndicador": 31,
  "Nombre": "Trabajos mantenimiento preventivo",
  "Calculo": "Preventivos / Total de trabajos de mantenimiento",
  "IdTipoIndicador": 8
}, {
  "IdIndicador": 32,
  "Nombre": "Trabajos mantenimiento correctivo",
  "Calculo": "Correctivos / Total de trabajos de mantenimiento",
  "IdTipoIndicador": 8
}, {
  "IdIndicador": 33,
  "Nombre": "Trabajos proyectos de mantenimiento ",
  "Calculo": "Proyectos / Total de trabajos de mantenimiento",
  "IdTipoIndicador": 8
}, {
  "IdIndicador": 34,
  "Nombre": "Llamadas de atención por faltas a la seguridad.",
  "Calculo": "Llamadas de atención / Total de colaboradores",
  "IdTipoIndicador": 9
}, {
  "IdIndicador": 35,
  "Nombre": "Horas Hombre de entrenamiento",
  "Calculo": "Horas de capacitación por colaborador / Total de colaboradores",
  "IdTipoIndicador": 9
}, {
  "IdIndicador": 36,
  "Nombre": "Ordenes de servicio realizadas",
  "Calculo": "Total de OS finalizadas",
  "IdTipoIndicador": 10
}, {
  "IdIndicador": 37,
  "Nombre": "Ordenes de compra",
  "Calculo": "Total OC Solicitadas",
  "IdTipoIndicador": 10
}, {
  "IdIndicador": 38,
  "Nombre": "Compras de emergencia .",
  "Calculo": "Total de compras por emergencia",
  "IdTipoIndicador": 10
}, {
  "IdIndicador": 39,
  "Nombre": "Horas extras por trabajos de mantenimiento",
  "Calculo": "Total de horas extras por mantenimiento",
  "IdTipoIndicador": 11
}, {
  "IdIndicador": 40,
  "Nombre": "Ausencias de personal",
  "Calculo": "Ausentes / Total de empleados en turno * 100",
  "IdTipoIndicador": 11
}, {
  "IdIndicador": 41,
  "Nombre": "Suspensiones por enfermedad",
  "Calculo": "Suspendidos / Total de empleados * 100",
  "IdTipoIndicador": 11
}, {
  "IdIndicador": 42,
  "Nombre": "Fuerza Laboral",
  "Calculo": "Cantidad de colaboradores",
  "IdTipoIndicador": 11
}];

$('#btnBuscar').click(function() {
  var html = '';
  $.each(encabezado, function(i, item) {
    html += '<div class="col-sm-6 col-md-6 col-lg-6">' +
      '<ul class="collection z-depth-2">' +
      '<li class="collection-item avatar">' +
      '<i class="material-icons circle red">play_arrow</i>' +
      '<span class="title">' + 'Perspectiva' + '</span>' +
      '<p>' +
      item.IdPerspectiva +
      '<br>' +
      'Second Line' +
      '</p>' +
      '<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>' +
      '</li>' +
      '<div id="idPerspectiva-' + item.IdPerspectiva + '" data-encabezado="' + item.IdPerspectiva + '"></div>' +
      '</ul>' +
      '</div>';
  });

  document.getElementById('Estructura').innerHTML = html;
  generarSubtitulos();
});

function generarSubtitulos() {
  $.each(subtitulo, function(i, item) {
    var htmli = '<li class="collection-item avatar"><i class="material-icons circle green">insert_chart</i>' +
      '<p>Perspectiva' +
      item.IdPerspectiva +
      '<br> Indicador ' +
      item.IdTipoIndicador +
      '</p>' +
      '<a href="#!" class="secondary-content"><i class="material-icons">play_arrow</i></a>' +
      '</li>' +
      '<div id="idTipoIndicador-' + item.IdTipoIndicador + '" data-detalles="' + item.IdTipoIndicador + '"></div>';
    var subtitulo = document.getElementById('idPerspectiva-' + item.IdPerspectiva)
    subtitulo.innerHTML = htmli;
  });
  generarDetalles();
}

function generarDetalles() {
  $.each(detalles, function(i, item) {
    var delayInMilliseconds = 1000; //1 second

    setTimeout(function() {
      //your code to be executed after 1 second
    }, delayInMilliseconds);
    var htmli2 = '<li class="collection-item avatar"><i class="material-icons circle yellow">insert_chart</i>' +
      '<p>' +
      item.Nombre +
      '<br>' +
      'Second Line' +
      '</p>' +
      '<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>' +
      '</li>';
    var detalle = document.getElementById('idTipoIndicador-' + item.IdTipoIndicador);
    detalle.innerHTML = htmli2;
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<div class="col-lg-3">
  <div class="form-group">
    <input id="btnBuscar" type="button" value="Buscar" style="width: 100%; margin-top:10px;" />
  </div>
</div>
<div class="col-lg-12">
  <div id="Estructura">
  </div>
</div>

I tried to fix it in several ways but I can't get it to work properly. If you could help me I would be very grateful.

1 Answers

Voted

alanfcm · Answer 1 · 2020-07-13T15:45:35+08:00

Your problem is that you are not using the full potential of jQuery. You are mixing jQuery with vanilla javascript. Instead of using innerHTML, use jQuery append, otherwise jQuery doesn't recognize new elements. I leave you an example:

var encabezado = [{
  "IdPerspectiva": 1,
  "Nombre": "Perspectiva Financiera"
}, {
  "IdPerspectiva": 2,
  "Nombre": "Perspectiva Clientes"
}, {
  "IdPerspectiva": 3,
  "Nombre": "Perspectiva Procesos Internos"
}, {
  "IdPerspectiva": 4,
  "Nombre": "Perspectiva Aprendizaje y Crecimiento "
}];

var subtitulo = [{
  "IdTipoIndicador": 1,
  "Nombre": "Generar energía eficientemente",
  "IdPerspectiva": 1
}, {
  "IdTipoIndicador": 2,
  "Nombre": "Entregar energía a Comercialización, de buena calidad al menor costo",
  "IdPerspectiva": 1
}, {
  "IdTipoIndicador": 3,
  "Nombre": "Ejecutar los gastos alineados al presupuesto establecido",
  "IdPerspectiva": 1
}, {
  "IdTipoIndicador": 4,
  "Nombre": "Mantener un alto indicador de disponibilidad y confiabilidad en la generación de energía.",
  "IdPerspectiva": 2
}, {
  "IdTipoIndicador": 5,
  "Nombre": "Despachar según programa de venta de energía",
  "IdPerspectiva": 2
}, {
  "IdTipoIndicador": 6,
  "Nombre": "Proveer calidad de vapor a Fabrica de Azúcar para sus procesos",
  "IdPerspectiva": 2
}, {
  "IdTipoIndicador": 7,
  "Nombre": "Realizar una operación segura",
  "IdPerspectiva": 3
}, {
  "IdTipoIndicador": 8,
  "Nombre": "Mantener los equipos funcionando bajo las especificaciones técnicas",
  "IdPerspectiva": 3
}, {
  "IdTipoIndicador": 9,
  "Nombre": "Implementar una cultura de seguridad personal basada en principios y valores",
  "IdPerspectiva": 4
}, {
  "IdTipoIndicador": 10,
  "Nombre": "Registrar gestión de compras",
  "IdPerspectiva": 4
}, {
  "IdTipoIndicador": 11,
  "Nombre": "Cumplir con los requerimientos de Recurso humano para la operación",
  "IdPerspectiva": 4
}];

var detalles = [{
  "IdIndicador": 1,
  "Nombre": "Promedio Generación Bruta de KW por hora",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 2,
  "Nombre": "Promedio Generación Venta de KW por hora",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 3,
  "Nombre": "Ton de Carbón por hora",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 4,
  "Nombre": "Ton de Bagazo por hora",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 5,
  "Nombre": "KWh / Ton Carbón",
  "Calculo": "KWh Carbón / Ton Carbón",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 6,
  "Nombre": "KWh / Ton biomasa",
  "Calculo": "KWh Bagazo / Ton Bagazo",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 7,
  "Nombre": "Kw / Ton de vapor",
  "Calculo": "KWh Bruta / Ton Vapor",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 8,
  "Nombre": "Kw / Ton de agua DM ",
  "Calculo": "KWh Bruta / Ton Agua DM",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 9,
  "Nombre": "Flujo de vapor hora",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 10,
  "Nombre": "Flujo de agua de alimentación a la caldera",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 11,
  "Nombre": "BTU / Lb de carbón (Poder Calorifico)",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 12,
  "Nombre": "BTU / Lb de Biomasa (Poder Calorifico)",
  "Calculo": "",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 13,
  "Nombre": "Consumo de energía de auxiliares",
  "Calculo": "KWh Bruta - Kwh Venta",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 14,
  "Nombre": "Heat rate BTU / Kw",
  "Calculo": "[(Ton Carbón x 2204 x PoderCalorificoCarbón) + (Ton Bagazo x 2204 x PoderCalorificoBagazo)] / KWh Bruta",
  "IdTipoIndicador": 1
}, {
  "IdIndicador": 15,
  "Nombre": "Horas en línea por día",
  "Calculo": "",
  "IdTipoIndicador": 2
}, {
  "IdIndicador": 16,
  "Nombre": "Compra de energía",
  "Calculo": "",
  "IdTipoIndicador": 2
}, {
  "IdIndicador": 17,
  "Nombre": "Perdida de potencia en la línea",
  "Calculo": "(KWh Venta B4 + KWh Venta B3 - KWh Compra B4 - KWh Compra B3) - (KWh Venta PE - KWh Compra PE)",
  "IdTipoIndicador": 2
}, {
  "IdIndicador": 18,
  "Nombre": "Programa de generación Diario",
  "Calculo": "Generado / Programado * 100",
  "IdTipoIndicador": 2
}, {
  "IdIndicador": 19,
  "Nombre": "Ejecución de presupuesto Mano de Obra",
  "Calculo": "",
  "IdTipoIndicador": 3
}, {
  "IdIndicador": 20,
  "Nombre": "Ejecución de presupuesto Insumos",
  "Calculo": "",
  "IdTipoIndicador": 3
}, {
  "IdIndicador": 21,
  "Nombre": "Ejecución de presupuesto Servicios Externos",
  "Calculo": "",
  "IdTipoIndicador": 3
}, {
  "IdIndicador": 22,
  "Nombre": "Ejecución de presupuesto Servicios Internos",
  "Calculo": "",
  "IdTipoIndicador": 3
}, {
  "IdIndicador": 23,
  "Nombre": "Horas en línea por día.",
  "Calculo": "",
  "IdTipoIndicador": 4
}, {
  "IdIndicador": 24,
  "Nombre": "Programa de generación Diario.",
  "Calculo": "Generado / Programado * 100",
  "IdTipoIndicador": 5
}, {
  "IdIndicador": 25,
  "Nombre": "Flujo de vapor hora.",
  "Calculo": "",
  "IdTipoIndicador": 6
}, {
  "IdIndicador": 26,
  "Nombre": "Fatalidades",
  "Calculo": "Numero de fatalidades",
  "IdTipoIndicador": 7
}, {
  "IdIndicador": 27,
  "Nombre": "Accidentes registrados",
  "Calculo": "Numero de accidentes",
  "IdTipoIndicador": 7
}, {
  "IdIndicador": 28,
  "Nombre": "Colisiones vehiculares",
  "Calculo": "Numero de colisiones",
  "IdTipoIndicador": 7
}, {
  "IdIndicador": 29,
  "Nombre": "Suspensiones por lesiones laborales",
  "Calculo": "Suspendidos / Total de empleados * 100",
  "IdTipoIndicador": 7
}, {
  "IdIndicador": 30,
  "Nombre": "Llamadas de atención por faltas a la seguridad",
  "Calculo": "Llamadas de atención / Total de colaboradores",
  "IdTipoIndicador": 7
}, {
  "IdIndicador": 31,
  "Nombre": "Trabajos mantenimiento preventivo",
  "Calculo": "Preventivos / Total de trabajos de mantenimiento",
  "IdTipoIndicador": 8
}, {
  "IdIndicador": 32,
  "Nombre": "Trabajos mantenimiento correctivo",
  "Calculo": "Correctivos / Total de trabajos de mantenimiento",
  "IdTipoIndicador": 8
}, {
  "IdIndicador": 33,
  "Nombre": "Trabajos proyectos de mantenimiento ",
  "Calculo": "Proyectos / Total de trabajos de mantenimiento",
  "IdTipoIndicador": 8
}, {
  "IdIndicador": 34,
  "Nombre": "Llamadas de atención por faltas a la seguridad.",
  "Calculo": "Llamadas de atención / Total de colaboradores",
  "IdTipoIndicador": 9
}, {
  "IdIndicador": 35,
  "Nombre": "Horas Hombre de entrenamiento",
  "Calculo": "Horas de capacitación por colaborador / Total de colaboradores",
  "IdTipoIndicador": 9
}, {
  "IdIndicador": 36,
  "Nombre": "Ordenes de servicio realizadas",
  "Calculo": "Total de OS finalizadas",
  "IdTipoIndicador": 10
}, {
  "IdIndicador": 37,
  "Nombre": "Ordenes de compra",
  "Calculo": "Total OC Solicitadas",
  "IdTipoIndicador": 10
}, {
  "IdIndicador": 38,
  "Nombre": "Compras de emergencia .",
  "Calculo": "Total de compras por emergencia",
  "IdTipoIndicador": 10
}, {
  "IdIndicador": 39,
  "Nombre": "Horas extras por trabajos de mantenimiento",
  "Calculo": "Total de horas extras por mantenimiento",
  "IdTipoIndicador": 11
}, {
  "IdIndicador": 40,
  "Nombre": "Ausencias de personal",
  "Calculo": "Ausentes / Total de empleados en turno * 100",
  "IdTipoIndicador": 11
}, {
  "IdIndicador": 41,
  "Nombre": "Suspensiones por enfermedad",
  "Calculo": "Suspendidos / Total de empleados * 100",
  "IdTipoIndicador": 11
}, {
  "IdIndicador": 42,
  "Nombre": "Fuerza Laboral",
  "Calculo": "Cantidad de colaboradores",
  "IdTipoIndicador": 11
}];

$('#btnBuscar').click(function() {
  var html = '';
  $.each(encabezado, function(i, item) {
    html += '<div class="col-sm-6 col-md-6 col-lg-6">' +
      '<ul class="collection z-depth-2">' +
      '<li class="collection-item avatar">' +
      '<i class="material-icons circle red">play_arrow</i>' +
      '<span class="title">' + 'Perspectiva' + '</span>' +
      '<p>' +
      item.IdPerspectiva +
      '<br>' +
      'Second Line' +
      '</p>' +
      '<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>' +
      '</li>' +
      '<div id="idPerspectiva-' + item.IdPerspectiva + '" data-encabezado="' + item.IdPerspectiva + '"></div>' +
      '</ul>' +
      '</div>';
  });

  $("#Estructura").append(html);
  generarSubtitulos();
});

function generarSubtitulos() {
  $.each(subtitulo, function(i, item) {
    var htmli = '<li class="collection-item avatar"><i class="material-icons circle green">insert_chart</i>' +
      '<p>Perspectiva' +
      item.IdPerspectiva +
      '<br> Indicador ' +
      item.IdTipoIndicador +
      '</p>' +
      '<a href="#!" class="secondary-content"><i class="material-icons">play_arrow</i></a>' +
      '</li>' +
      '<div id="idTipoIndicador-' + item.IdTipoIndicador + '" data-detalles="' + item.IdTipoIndicador + '"></div>';    
    var subtitulo = $('#idPerspectiva-' + item.IdPerspectiva);
    subtitulo.append(htmli);
  });
  generarDetalles();
}

function generarDetalles() {
  $.each(detalles, function(i, item) {
    var delayInMilliseconds = 1000; //1 second

    setTimeout(function() {
      //your code to be executed after 1 second
    }, delayInMilliseconds);
    var htmli2 = '<li class="collection-item avatar"><i class="material-icons circle yellow">insert_chart</i>' +
      '<p>' +
      item.Nombre +
      '<br>' +
      'Second Line' +
      '</p>' +
      '<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>' +
      '</li>';
    var detalle = $('#idTipoIndicador-' + item.IdTipoIndicador);
    detalle.append(htmli2);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<div class="col-lg-3">
  <div class="form-group">
    <input id="btnBuscar" type="button" value="Buscar" style="width: 100%; margin-top:10px;" />
  </div>
</div>
<div class="col-lg-12">
  <div id="Estructura">
  </div>
</div>

Create HTML Structure Dynamically with JavaScript

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?