Leaflet, how to update popup content on geojson layer with feature.properties?

Question

I want to update the content of my popup (it appears when clicking on a geojson-layer, and individuel for each feature). Therefore I have to change "just" my variable of one column in the geojson. Like this: var co2= feature.properties.jahr1 and after updating it should be like this: co2 = feature.properties.jahr2

my initial onEachFeature from the layer looks like this:

onEachFeature: function(feature, layer ){

    var name = feature.properties.name;
    var co2 = feature.properties.__2013_1;

    layer.bindPopup('<div id="infofenster_div">' +
                    '<h3>' + name + '</h3>' +
                    '<p><span>CO2-Emission: </span>' + co2 + ' %</p>' +
                    '</div>' )
}

And this is my function (without the variables it's working):

function change_popup(){

    worldbankLayer.eachLayer(function (layer) {
        layer._popup.setContent('<div id="infofenster_div">' +
                                '<h3>' + name + '</h3>' +
                                '<p><span>CO2-Emission: </span>' + co2 + ' %</p>' +
                                '</div>')
    })
};

---

I call the function with click on a button. And like I said, without the try to call

feature.properties.mygeojsoncolumn

it's working just fine

I tried the

 layer.setPopupContent(newContent);

too, and it's working just like the function before just without the properties... I also tried to declare the variables again, but the debugger always tells me, that 'feature is not defined'...

the code looks like this now:

function change_popup(){

var name = feature.properties.name;
var co2 = feature.properties.__2010_1;

worldbankLayer.eachLayer(function (layer) {
    layer.setPopupContent('<div id="infofenster_div">' +
                            '<h3>' + name + '</h3>' +
                            '<p><span>CO2-Emission: </span>' + co2 + ' %</p>' +
                            '</div>')
})};

Answer 1

By the API the correct way of changing a popup content is with layer.setPopupContent(newContent);
This article (link) might be useful for more approaches.

EDIT: I just saw your update - I think you have a problem in your function, feature is not defined since it is an attr of a layer (and you don't pass any layer/feture to the function) , I think you should add the name/co2 declaration inside the featureGroup loop:

function change_popup(){

  worldbankLayer.eachLayer(function (layer) {
    var name = layer.feature.properties.name;
    var co2 = layer.feature.properties.__2010_1;
    layer.setPopupContent('<div id="infofenster_div">' +
                            '<h3>' + name + '</h3>' +
                            '<p><span>CO2-Emission: </span>' + co2 + ' %</p>' +
                            '</div>')
})};