Adding multiple statements to function

Question

I'm getting my data like this:

$.ajax({
            url: 'php/get_all_attri.php',
            type: 'GET',
            dataType: 'JSON',
            data: {
                col_name: firstSel
            },
            success: function(data) {
                var total_statement = {};
               $.each(data, function(i, data) {
                console.log(data.attri_1);
            });

                }
            });

In the console, this returns the possible values for my query such as 18 19 20 21, etc.

They can also be strings like TRUE FALSE.

What I need is for these values to create statements that are used to build a map using cartoDB/leaflet. Here's the function:

function goMap3() {

        var layerSource = {
            user_name: 'me',
            type: 'cartodb',
            sublayers: [{
                sql: "SELECT cartodb_id, the_geom_webmercator FROM mytable where attribute='" + attr_value + "'",
                cartocss: "#location_fusion_table {marker-fill:#1d5492;marker-width:5;marker-line-width: 0.3;marker-line-color:#fff;marker-allow-overlap: true;"}
            }, ]
        };
        cartodb.createLayer(map_object, layerSource, options)
            .addTo(map_object);
    }

What I need to happen is for this entire part to be written as many times as there are different values returned by my AJAX.

          {
                sql: "SELECT cartodb_id, the_geom_webmercator FROM mytable where attribute='" + attr_value + "'",
                cartocss: "#location_fusion_table {marker-fill:#1d5492;marker-width:5;marker-line-width: 0.3;marker-line-color:#fff;marker-allow-overlap: true;"}
            },

In this case, attr_value is what needs to be replaced each time with the values from AJAX. This would allow my entire function to look something like this:

function goMap3() {

        var layerSource = {
            user_name: 'me',
            type: 'cartodb',
            sublayers: [{
                sql: "SELECT cartodb_id, the_geom_webmercator FROM mytable where attribute='17'",
                cartocss: "#location_fusion_table {marker-fill:#1d5492;marker-width:5;marker-line-width: 0.3;marker-line-color:#fff;marker-allow-overlap: true;"}
            }, 
  {
                sql: "SELECT cartodb_id, the_geom_webmercator FROM mytable where attribute='18'",
                cartocss: "#location_fusion_table {marker-fill:#1d5492;marker-width:5;marker-line-width: 0.3;marker-line-color:#fff;marker-allow-overlap: true;"}
            },
  {
                sql: "SELECT cartodb_id, the_geom_webmercator FROM mytable where attribute='19'",
                cartocss: "#location_fusion_table {marker-fill:#1d5492;marker-width:5;marker-line-width: 0.3;marker-line-color:#fff;marker-allow-overlap: true;"}
            },]
        };
        cartodb.createLayer(map_object, layerSource, options)
            .addTo(map_object);
    }

In summary: I'm trying to figure out how I end up with that last function that I have in my question. I need to make a number of those "sublayers" to match the number of values returned from my AJAX and those values filled in the correct area in the sublayer statements.

I'm trying to figure out how I end up with that last function that I have in my question. I need to make a number of those "sublayers" to match the number of values returned from my AJAX and those values filled in the correct area in the sublayer statements. — jonmrich, Mar 27 '15 at 00:45
How about that? (http://stackoverflow.com/a/29291459/1330180) — Dean Meehan, Mar 27 '15 at 00:46

Dean Meehan · Answer 1 · 2015-03-27T00:56:02.883

1

You would want to loop for each entry in the array.Just send your data to this function and it will create the object

   function goMap3(data) {

    var layerSource = {
        user_name: 'me',
        type: 'cartodb',
        sublayers: []
    };

    //Adds a new sublayer to the layerSource object every iteration. 
    $.each(data, function (i, attr_value) {
        layerSource.sublayers.push({
            sql: "SELECT cartodb_id, the_geom_webmercator FROM mytable where attribute='" + attr_value + "'",
            cartocss: "#location_fusion_table {marker-fill:#1d5492;marker-width:5;marker-line-width: 0.3;marker- line-color:#fff;marker-allow-overlap: true;"
        });
    });

    cartodb.createLayer(map_object, layerSource, options)
        .addTo(map_object);
}

edited Mar 27 '15 at 00:56

answered Mar 27 '15 at 00:46

Dean Meehan

2,511
22
36

Right...I got it if I know exactly how many values are returned from my AJAX, but I don't. Sometimes it could be 5 and sometimes 2 or 10. So, I need to build as many of these sublayer statements as I have values returned. – jonmrich Mar 27 '15 at 00:48
Oh, ill fix now then for your solution – Dean Meehan Mar 27 '15 at 00:50
Amended answer should work for your solution. You could place the whole inner function inside your "success: function(data){}" – Dean Meehan Mar 27 '15 at 00:57

score 1 · Accepted Answer · answered Mar 27 '15 at 00:49

Those aren't multiple statements, they're just elements of an array. You can simply add to the array in the $.each() loop:

function goMap3(data) {

    var sublayers = [];
    $.each(data, function(i, attr_value) {
        sublayers.push({
            sql: "SELECT cartodb_id, the_geom_webmercator FROM mytable where attribute='" + attr_value + "'",
            cartocss: "#location_fusion_table {marker-fill:#1d5492;marker-width:5;marker-line-width: 0.3;marker-line-color:#fff;marker-allow-overlap: true;"
        });
    });

    var layerSource = {
        user_name: 'me',
        type: 'cartodb',
        sublayers: sublayers
    };
    cartodb.createLayer(map_object, layerSource, options)
        .addTo(map_object);
}

Then you can call geoMap3(data) from the AJAX success function.

Took me a little bit of tinkering, but I've got it. Thank you! Appreciate the extra explanation. I did just realize one thing, I need a different color for `marker-fill` for each element. Any thoughts on how to begin to do that? — jonmrich, Mar 27 '15 at 01:16
Calculate the color into a variable, and use string concatenation to put it into the `cartocss` property. — Barmar, Mar 27 '15 at 01:20

Adding multiple statements to function

2 Answers2