How do I show an aliased field in a CartoDB.js Infobox?

Question

I used CartoDB.js to do a SQL query of a layer which also performs some calculations on the layer's fields. This part works fine, but I just can't figure out how to get the calculated field into my infobox template.

For example, in this sample code from the CartoDB github: https://github.com/CartoDB/cartodb.js/blob/develop/examples/tutorials/tutorial-2.html if I changed line 47 to be:

sql: "SELECT pop_other/10 AS testval FROM ..."

How would I show that "testval" in an infowindow? I've tried doing {{content.data.testval}} on line 20, but that doesn't work.

Answer 1

The example you're mentioning is using the viz.json to create the layer, which means that the layer is being created with the interactivity options of that visualization.

If you open the viz.json, you'll see:

{
fields: [
{
name: "scalerank",
title: true,
position: 0
},
{
name: "natscale",
title: true,
position: 1
},
{
name: "labelrank",
title: true,
position: 2
},
{
name: "featurecla",
title: true,
position: 3
},
{
name: "name",
title: true,
position: 4
},
{
name: "namepar",
title: true,
position: 5
},
{
name: "namealt",
title: true,
position: 6
},

....
{
name: "checkme",
title: true,
position: 33

Which means that all those columns will be accessible directly by using the brackets in the template.

What you can do:

• Enable all the columns you need in the infowindow if you're using the viz.json too

or

• Use the interactivity value in order to make the columns interactive. An example:

  cartodb.createLayer(map, {
        user_name: 'username',
        type: 'cartodb',
        sublayers: [{
          sql: "SELECT * FROM ne_10m_populated_places_simple_14 where megacity=0",
          cartocss: "#ne_10m_populated_places_simple_14{  marker-fill-opacity: 0.9;  marker-line-color: #FFF;  marker-line-width: 1.5;  marker-line-opacity: 1;  marker-placement: point;  marker-type: ellipse;  marker-width: 4.5;  marker-fill: #B40903;  marker-allow-overlap: true;}",
          interactivity: "cartodb_id, megacity, name"
        }]
      })
        .addTo(map)
        .on('done', function(lyr) {
  
        var infowindow = cdb.vis.Vis.addInfowindow(map, lyr.getSubLayer(0), ['cartodb_id', 'megacity', 'name'])
         infowindow.model.set('template', $('#infowindow_template').html());
  
  
        }).on('error', function() {
          console.log("some error occurred");
        });