Question

I have a jQuery ajax call wich fills a array; this array should be accesible in another function. It actually is in FireFox and Safari, but isn’t in IE.
IE says: SCRIPT5007 Unable to get the value of property ‘name’: object is null or undefined

It looks like it has a problem with ‘globalDataArray[i].name’ as well with ‘globalDataArray[i].objectid’. Both are perfectly assessed and used by FF and IE, so there not really empty. Anyone any thoughts on why this happens? I’ve googled a lot; the common problem of using comma’s or stuff at the end is not the solution.

Here the var is set:

var globalDataArray = [];
function retrieveContentData(content){


    $.ajax({
        url: 'http://services.arcgis.com/nSZVuSZjHpEZZbRo/ArcGIS/rest/services/NLCito/FeatureServer/0/query',
        data: {
            where: content,
            geometryType: 'esriGeometryEnvelope',
            spatialRel: 'esriSpatialRelIntersects',
            outFields: '*',
            returnGeometry: false,
            returnIdsOnly: false,
            returnCountOnly: false,
            f: 'pjson'
        },
        success: function(data){
            data = $.parseJSON(data);//Always parse JSON data
            var features = data.features;
            for (var i=0; i<features.length; i++) {
                //globalDataArray.push(features[i].attributes.NAME);
                //globalDataArray[features[i].attributes.OBJECTID] = features[i].attributes.NAME;
                globalDataArray[i] = {  "objectid": features[i].attributes.OBJECTID,
                                        "name": features[i].attributes.NAME,
                                        "type": features[i].attributes.Type
                                        };
            }
            shuffle(globalDataArray);//Shuffle the array items

            //Count total and set progress report
            $('#totalTasks').text(features.length);

            //Initialize the progress bar and create the first task
            updateProgressBar(0);
            createNewTask();

        }//End success
    });//End Ajax call

}//End function

And here is where I would like to use it again:

function validateAnswer(){
    //Prevent validating if task div not shown
    if($('#task').is(":visible")){

        var passedTask = false;

        var typedAnswer = $('#taskAnswerInput').val();

        var desiredAnswer       = globalDataArray[i].name;
        var desiredAnswerShort  = desiredAnswer.replace(/\(.*?\)/, "");//Remove eveything within and with bracklets
        desiredAnswerShort      = jQuery.trim(desiredAnswerShort);//Remove any whitespace on beginning and end of the string

        if(typedAnswer === desiredAnswer || typedAnswer === desiredAnswerShort){
            alert('Exact, helemaal goed!');
            $('#tasksRight').text(parseInt($('#tasksRight').text()) +1);
            passedTask = true;
            updateProgressBar(i);
        }else{
            alert('Jammer, dat is niet het goede antwoord');
        }

        if(passedTask == true){
            nextTask();
        }
    }//end if visible
}

End this is where the createNewTask() function is being called:

var i = 0;
function createNewTask(){
    //Since a new tasks is started, let's update the progress
    $('#tasksDone').text(i);

    //Highlight a single place
    executeQuery(globalDataArray[i].objectid);

    //Change tasks text
    var type = globalDataArray[i].type;
    if(type === 'Plaats'){ type = 'Welke plaats';}
    if(type === 'Gebied'){ type = 'Welk gebied';}
    if(type === 'Water'){ type = 'Welk water';}
    if(type === 'Provincie'){ type = 'Welke provincie';}
    $('#taskPointType').html(type);

    $('#taskAnswerInput').val('');//Clear the input field
}

function giveupTask(){
    var correctAnswer = globalDataArray[i].name;
    alert(correctAnswer);
    $('#tasksWrong').text(parseInt($('#tasksWrong').text()) +1);//Update currentWrong
    nextTask();
}

//Aparte functie, om validateAnswer() flexibeler te houden
function nextTask(){
    //fire new task
    i++;
    if(i < globalDataArray.length){
        //Update progressbar
        updateProgressBar(i+1);//+1 since i starts with 0
        createNewTask();
    }else{
        //All tasks done
        alert('Einde, alle plaatsen gehad');
    }
}

Answer 1

Solved it. For anyone interested:

it looks like IE isn’t always giving back the right error’s, jquery ajax success, complete and error functions we’re helpful in fixing it.
In the end it turned out that the problem was in the cross-domain ajax-call; IE is blocking them, unless you’re using dataType: jsonp. Just regular json isn’t good enough.

Thanks for sharing you’re thoughts!