Helen Danger Burns Helen Danger Burns - 3 months ago 10
jQuery Question

JQuery treating my non-empty array as empty?

Very simply I have built a multi-dimensional array across a long section of script and at the end I want to loop through each level and do something. I have logged the array out in the console and can see everything as it should be, but the console then tells me the array length is 0 and sure enough if I

.length
it is also tells me the length is 0, so my JQuery each isn't firing. I can't understand what one can do to make it behave like this. I am absolutely stumped!

This is the console:
enter image description here

Here is the JQuery, although the array/object is built over so much script and ajax calls that I've tried to only put in the bits that count...

var field_layers = [];

function blah_blah() {
do_api_call("api_call_url_here")
.done(function(response, textStatus, xhr) {
var map_layers = response;
$(map_layers).each(function(map_layers_key, map_layers_detail) {
var datalayer_id = map_layers_detail.Layer.DataLayerId;

// add field ids to array:
field_layers["field_id_"+map_layers_detail.Layer.FieldId] = [];
do_api_call("api_call_url_here/"+datalayer_id)
.done(function(response, textStatus, xhr) {
// create an empty array for field layers:
field_layers["field_id_"+map_layers_detail.Layer.FieldId]["layer_id_"+datalayer_id] = [];
var map_layer_zones = response;
$(map_layer_zones).each(function(map_layer_zone_key, map_layer_zone_detail) {
// Add the zones to the layer
field_layers["field_id_"+map_layers_detail.Layer.FieldId]["layer_id_"+datalayer_id].push({
"zone_id":zone.DataLayerZoneId,
"title":zone.DataLayerZoneId+" title here"
});
});
});
});
});
}

function go_to_field(field_id) { // this is what gives me the console screenshot
console.log("field_id: "+field_id);
console.log(field_layers["field_id_"+field_id]);
console.log(field_layers["field_id_"+field_id].length);
}

Answer

Try changing your field_layers = [] to be an object instead of an array: field_layers = {}. I think if you change each place you are initializing an empty array to initializing an empty object, then your code should work as-is.

Notice the difference between square brackets and curly braces.

With you coming from a PHP background, you can think of Javascript objects (the {}) as associative (or named) arrays in PHP.

So the final code would look like:

var field_layers = {};

function blah_blah() {
    do_api_call("api_call_url_here")
        .done(function(response, textStatus, xhr) {
            var map_layers = response;
            $(map_layers).each(function(map_layers_key, map_layers_detail) {
                var datalayer_id = map_layers_detail.Layer.DataLayerId;

                // add field ids to object:
                field_layers["field_id_"+map_layers_detail.Layer.FieldId] = {};
                do_api_call("api_call_url_here/"+datalayer_id)
                    .done(function(response, textStatus, xhr) {
                    var map_layer_zones = response;
                    $(map_layer_zones).each(function(map_layer_zone_key, map_layer_zone_detail) {
                        // Add the zones to the layer
                        field_layers["field_id_"+map_layers_detail.Layer.FieldId]["layer_id_"+datalayer_id] = {
                            "zone_id":zone.DataLayerZoneId,
                            "title":zone.DataLayerZoneId+" title here"
                        }; // notice the assignment of object literal here
                    });
                });
        });
    });
}

function go_to_field(field_id) { // this is what gives me the console screenshot
    console.log("field_id: "+field_id);
    console.log(field_layers["field_id_"+field_id]);
    console.log(field_layers["field_id_"+field_id].length);
}

I haven't tested this, but I think it should work.