Javascript assign value of variable inside anonymous function

Question

I'm trying to create several layers for OpenLayers. I loop through the array and assign values for each values in using typename: 'Test:' + item.ServiceName . The problem is when the OpenLayer calls the function it grabs the last assigned value of item.ServiceName which is always "Test_Layer_3" so Test_Layer_1 and Test_Layer_2 are not used.

How can I change it so that Test_Layer_1, Test_Layer_2, Test_Layer_3 are assigned to typename?

    var _MyLayers = [];
    _MyLayers.push({ "Id": 0, "ServiceName": "Test_Layer_1" });
    _MyLayers.push({ "Id": 1, "ServiceName": "Test_Layer_2" });
    _MyLayers.push({ "Id": 2, "ServiceName": "Test_Layer_3" });

    for (var i = 0; i < _MyLayers.length; i++)
    {
        var item = _MyLayers[i];

        var sourceVector = new ol.source.Vector({
            loader: function (extent)
            {
                $.ajax('http://localhost/geoserver/wfs', {
                    type: 'GET',
                    data: {
                        service: 'WFS',
                        version: '1.1.0',
                        request: 'GetFeature',
                        typename: 'Test:' + item.ServiceName,
                        srsname: 'EPSG:3857',
                        outputFormat: 'application/json',
                        bbox: extent.join(',') + ',EPSG:3857'
                    }
                });
            },
            strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({})),
        });
        var layerVector = new ol.layer.Vector({
            source: sourceVector,
            minResolution: 0,
            maxResolution: 2,
            style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: "rgba(25, 163, 255, 1.5)", width: 1 }) })
        });

        _MapLayers.push(layerVector);
    }

Answer 1

It should work by replacing item.ServiceName with _MyLayers[i].ServiceName .

Explanation

When you define the loader functions it does not mean item.ServiceName is assigned to typename at that moment. Instead the function maintains a link to your item variable (sort of), which then links back to the value of _MyLayers[i] — a global.

When the loader function is called for each object by OpenLayers, 'Test:' + item.ServiceName, is evaluated and assigned to typename where the value represented by item has since changed. It will now point to the last item (eg _MyLayers[3] ) since it was the last value item was assigned.

By replacing the line above, the loader functions now each maintain a unique link directly to the global _MyLayers . As i is a number, each loader function implements a statement based on the value of i at the time the function was defined in your for loop (eg _MyLayers[1] , _MyLayers[2] , ... and so on).

Answer 2

I ended up assigning the value of item.ServiceName to sourceVector. Then reading the value of sourceVector inside the loader function.