Problem updating infowindow

Question

I have a problem with the infowindow of one of my sublayers in a Carto map. First of all I'll show my code. I create the layer options and then I get my sublayer. I set its options and a first version of the infowindow. After that, I create the event onclick, what changes the infowindow based on a variable I've declared before.

var subLayerOptions2 = {
          sql: "SELECT * FROM zonas WHERE cartodb_id IN (SELECT zonaid FROM devices_zonas WHERE deviceid IN (SELECT deviceid FROM users_devices WHERE userid=" + this.auth.getUserId() + "))",
          cartocss: "#layer {polygon-fill: " + ConstantesColores.colores[3] + "; polygon-opacity: 0.25; line-color: " + ConstantesColores.colores[3] + "; line-width: 1; line-opacity: 1;}",
          interactivity: ['cartodb_id']
}

// Creacion e introduccion del layer en el mapa
var sublayer2 = layer.getSubLayer(2);
sublayer2.set(subLayerOptions2);
sublayer2.infowindow.set('template', infow);
sublayer2.on('featureClick', (e, latlng, pos, data, layer) => {
              sublayer2.infowindow.set('template', infow.replace("#DispAsociados#", arrayZonasConDisp[data.cartodb_id].info));
              alert("Hey! You clicked " + data.cartodb_id);
});
sublayers.push(sublayer2);

The problem is that, the first time I click an element of the map, the infowindow is not updating well, the variable is empty, but when I click a second time it appears well. If I change the element I click, the first time appears the info corresponding to the last click, not this one. It's like a delay. It always show the info of the previous one.

Answer 1

The infowindow is updated after the click event:

// with this line you set the infowindow, the one which will be shown when you first click on the feature
sublayer2.infowindow.set('template', infow);

sublayer2.on('featureClick', (e, latlng, pos, data, layer) => {
// after the click event the infowindow will be updated
                  sublayer2.infowindow.set('template', infow.replace("#DispAsociados#", arrayZonasConDisp[data.cartodb_id].info));
                  alert("Hey! You clicked " + data.cartodb_id);

Anyway, you do not need to declare a variable and change your infowindow according to this variable. A much easier approach would be adding a new column to your dataset called dispositivos and show it as explained in this working example (I used the column name instead). You can find more information about adding infowindow in CARTO.js documentation and other blocks such as this one.