0

After reading many Stackoverflow questions, blogs, and documentation I still cannot figure out why this particular iteration over any array is not working.

I am using jQuery and javascript(obviously) to pull a GeoJSON file and then going over the properties of the resulting object to pull desired key/value pairs. As I find those pairs I want to insert then into another array object. The object is created as I expected however when I attempt to go over the newly created object nothing happens and if I try to find its length it returns a length of 0.

This is where I pull the records:

_recordsFromGeoJSON: function(inputText) {
    var retRecords = {},

    $.getJSON(this.GeoJSONUrl, function(data) {
        var geoJSONdata = data;

        $.each(geoJSONdata.features, function(fkey, fvalue) {
            $.each(fvalue.properties, function(pkey, pvalue) {
                var re = new RegExp(inputText, "i");
                var retest = re.test(pvalue);
                if (retest) {
                    retRecords[pvalue] = fvalue.geometry.coordinates;
                    return;
                }
            });
        });
    }); 
    return retRecords;
},

This is the code for the interation over the new object:

for(var key in this._retRecords) {
        //this function will never run
        var always = foo(bar);
    }

Some sample GeoJSON:

{
"type": "FeatureCollection",                                                                           
"features": [
{ "type": "Feature", "id": 0, "properties": { "NAME": "14 PARK PLACE PH 4", "AREAID":      3.0, "STR12M": 0.0, "CLS12M": 6.0, "STR4M": 0.0, "CLS4M": 0.0, "TOTAL": 164.0, "OCC": 112.0, "NFU": 0.0, "UNC": 3.0, "DVL": 49.0, "UDVL": 0.0 }, "geometry": { "type": "Point", "coordinates": [ -93.27512816536759, 37.044305883435001 ] } }
,
{ "type": "Feature", "id": 1, "properties": { "NAME": "ALPHA MEADOWS NORTH", "AREAID": 8.0, "STR12M": 0.0, "CLS12M": 0.0, "STR4M": 0.0, "CLS4M": 0.0, "TOTAL": 12.0, "OCC": 0.0, "NFU": 0.0, "UNC": 0.0, "DVL": 0.0, "UDVL": 0.0 }, "geometry": { "type": "Point", "coordinates": [ -92.839131163095786, 37.119205483765143 ] } }
]
}

When I console.log(this._retRecords); Chrome reports shows the object with all the properties I expected from the dataset:

Object
    14 PARK PLACE PH 4: Array[2]
        0: -93.27512816536759
        1: 37.044305883435
        length: 2
        __proto__: Array[0]
    ALPHA MEADOWS NORTH: Array[2]
        0: -92.839131163095786
        1: 37.119205483765143
        length: 2
        __proto__: Array[0]

Using both methods given on this question report 0 length.

I am quite certain I am missing something fundamental but I cannot find what it is. Any help, criticism, alternative methods would be great!

4
  • 2
    You are returning an empty object... at the moment return retRecords; is executed, the Ajax request is not completed yet and no data was added to the object. Nov 15, 2012 at 4:16
  • 1
    possible duplicate of Can't get correct return value from an jQuery Ajax call Nov 15, 2012 at 4:18
  • @FelixKling Actually it's worse. Not only is the object empty, it will be modified at some point later as well. Nov 15, 2012 at 4:21
  • @Jan: Yeah, but I did not want to make it more confusing ;) Nov 15, 2012 at 4:22

1 Answer 1

1

It appears that you don't understand that your getJSON() function starts immediately (e.g. sends the request) and then returns immediately long before the getJSON function has completed it's work. It's work will be done sometime later when the completion function is called. Thus retRecords is not yet populated when the _recordsFromGeoJSON() function returns.

This is asynchronous programming. The completion function for getJSON will be called sometime LATER, long after _recordsFromGeoJSON() returns. Thus, you cannot treat it like synchronous, serial programming.

Instead, retRecords is only known in the completion function or in any function you pass the data to and call from that completion function. This is how asynchronous programming works in javascript. You must initiate all further processing of the getJSON() result from the completion function. And, you can't return the result from _recordsFromGeoJSON() because the result is not yet known when that function returns. This is a different way of coding and it a bit of a pain, but it is how you have to deal with asynchronous operations in javascript.

2
  • 1
    Note the distinction between "completes" and "returns". getJSON() returns quickly but it's not nearly done yet ;-) Nov 15, 2012 at 4:25
  • Excellent guys. Thank you all for your help. My first real javascript project turned into a success once I got over my newbie error. Thanks!
    – RomaH
    Nov 15, 2012 at 16:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.