JSON/PrototypeJS - why does this only work SOMETIMES?

Question

This is driving me nuts!

I'm getting some JSON from my server:

---

{"id262":{"done":null,"status":null,"verfall":null,"id":262,"bid":20044,"art":"owner","uid":"demo02","aktion":null,"termin_datum":null,"docid":null,"gruppenid":null,"news":"newsstring","datum":"11.06.2010","header":"headerstring","for_uid":"demo01"},

"id263":{"done":null,"status":"pending","verfall":null,"bid":20044,"id":263,"uid":"demo02","art":"foo","aktion":"dosomething","termin_datum":"11.06.2010","docid":null,"gruppenid":null,"datum":"11.06.2010","news":"newsstring","for_uid":"demo01","header":"headerstring"},

"id261":{"done":null,"status":null,"verfall":null,"id":261,"bid":20044,"art":"termin","uid":"demo02","aktion":null,"termin_datum":"25.06.2010","docid":null,"gruppenid":null,"news":"newsstring","datum":"11.06.2010","header":"headerstring","for_uid":null}}

---

This is how my JS looks like:

var user = 'demo02';

 new Ajax.Request('myscript.pl?someparameter=value', { method:'get', 
    onSuccess: function(transport){
        var db_json = transport.responseText.evalJSON(),
            propCount = 0,
            someArray1 = [],
            someArray2 = [],
            otherArray = [];

        //JSON DEBUG
        console.log('validated string:');
        console.log(transport.responseText.evalJSON(true));

        for(var prop in db_json) { 
        propCount++;
            if  ( (db_json[prop].art == 'foo') && (db_json[prop].for_uid == user) ) {
                someArray1.push(db_json[prop]);
            } else if( (db_json[prop].art == 'foo') && (db_json[prop].uid == user) ) {
                someArray2.push(db_json[prop]);
            } else if( db_json[prop].art == 'log' ) {
                otherArray.push(db_json[prop]);
            }
        }

        if(someArray1.length>0) {
            someArray1.map(function(el){
                $('someArray1target').innerHTML += el.done;
                //do more stuff
            });
        }

        if(someArray2.length>0) {
            someArray2.map(function(el){
                $('someArray2target').innerHTML += el.done;
                //do more stuff
            });
        }   

});

Sometimes, it works perfectly.

Sometimes, i get my JSON String (it appears in Firebug's "answer"-tab), but it won't log the JSON in console-log(). I'm not getting any errors and javascript is still working.

Next time after reloading, it might work, but it might not.

I cannot remotely imagine why this only happens sometimes!

Answer 1

You are calling evalJSON twice, actually with different parameters each time.
Normally, I wouldn't expect this to have any side-effects, and indeed the prototype documentations for this method don't mention any. However, I remember that earlier versions of firebug were known to manipulate the XMLHttpRequest in weird ways (in order to capture the data going in and out), so maybe this is still relevant today.

Try changing the log statement to this instead:

console.log(db_json);

Answer 2

I found the answer. It makes me want to slam my head. My $('someArray1target') div sometimes was not loaded yet.

I was so focused in finding something weird in my JSON instead of searching for the more obvious, "standard" errors.