How do I color each polygon according to a parameter using javascript

I wrote a script that loads a geojson file on google maps. In the script, I tried to color each polygon representing the areas in a different color according to the "population density" from the geojson file.

I tried to get the "population density" in a loop function and implemented a conditional to color each polygon, but it didn't work.

function loadBoundariesFromGeoJson(geo_json_url) {
        initializeDataLayer();
        $.getJSON(geo_json_url, function (data) {
            if (data.type == "FeatureCollection") {
                if (data.features) {
                    for (var i = 0; i < data.features.length; i++) {
                        var boundary_id = i + 1;
                        var new_boundary = {};
                        if (!data.features[i].properties) data.features[i].properties = {};
                        data.features[i].properties.boundary_id = boundary_id;
                        data_layer.addGeoJson(data.features[i], { idPropertyName: 'boundary_id' });
                        new_boundary.feature = data_layer.getFeatureById(boundary_id);
                        if (data.features[i].properties.name) new_boundary.name = data.features[i].properties.name;
                        if (data.features[i].properties.popDensity) new_boundary.popDensity = data.features[i].properties.popDensity;
                        my_boundaries[boundary_id] = new_boundary;
                        if (data.features[i].properties.popDensity < 500) {
                            data_layer.overrideStyle(my_boundaries[i].feature, {
                                fillColor: '#00ff00',
                                fillOpacity: 0.9
                            });
                        } else {
                            data_layer.overrideStyle(my_boundaries[i].feature, {
                                fillColor: '#ff0000',
                                fillOpacity: 0.9
                            });
                        }
                    }
                }
            }
        });
    }

It gives an error "Cannot read property "feature" of undefined". How can I make this work?

Solution

Exception could be thrown because my_boundaries[i] could be empty. In below code.

data_layer.overrideStyle(my_boundaries[i].feature, {
    fillColor: '#00ff00',
    fillOpacity: 0.9
});

Now when you look at the array my_boundaries.

You are pushing into array using my_boundaries[boundary_id] = new_boundary; where boundary_id is i+1;

But as per the above code you are trying to fetch feature property from my_boundaries[i], So initially it would be 0 and there is no any data at that position.

So suggested solution is check my_boundaries[i] is empty or null before assigning property to it or use my_boundaries[boundary_id].

if (data.features[i].properties.popDensity < 500) {
    if (typeof my_boundaries[i]  !== "undefined"){
        data_layer.overrideStyle(my_boundaries[i].feature, {
            fillColor: '#00ff00',
            fillOpacity: 0.9
        });
    }
}

if (data.features[i].properties.popDensity < 500) {
    data_layer.overrideStyle(my_boundaries[boundary_id].feature, {
        fillColor: '#00ff00',
        fillOpacity: 0.9
    });
}

Hope it will help you.