Changing a SQL statement depending on a user's selected option

Hi all,

I am making a map with Carto.js and I am trying to update a SQL query depending on what the user has selected from a dropdown menu. For example, if the user selects “change to fruit production”, then the layer’s SQL query should change to:

SELECT * FROM indicators WHERE fruit ILIKE 'Yes'

Carto has recently updated, so there entire .js API formatting has changed. Using their docs, this is how I have added the SQL layer so far:

        //Add SQL layer
		const indicatorsSource = new carto.source.SQL(`
		  SELECT *
		    FROM indicators WHERE grain ILIKE 'Yes'     
		`);		

		const indicatorsStyle = new carto.style.CartoCSS(`
		  #layer {
		    polygon-fill: #50ae31;
    		polygon-opacity: 0.65;
		  }
		`);
		const indicators = new carto.layer.Layer(indicatorsSource, indicatorsStyle);

As you can see, I have no idea how to change the feature variable (“grain” in the example) depending on what the user has been selected. I have added the map to CodePen if anyone would like to see the working example.

Any help would be greatly appreciated! I am clearly a beginner with this, but I am emjoying the learning experience :grinning:

You pass in arguments to the function that executes the query like "SELECT * FROM foo WHERE foo.id = {{id}}", {id: 1234567} as far as I can see from the docs - https://carto.com/docs/carto-engine/carto-js/sql/; your code looks a little different though, so not sure if I’m looking at the same thing.

So the main problem is that Carto has been updated to V4, so everything has changed. These are the new docs that I followed - https://carto.com/developers/carto-js/guides/quickstart/#defining-layers