awsm awsm - 3 months ago 8
Javascript Question

Unable to get value from loop in IE8

I am populating a select based on the selection in another select. Everything works great in Chrome, FireFox, Safari, Edge, and IE 9+.

My problem is in IE8 where it gives me an error of "Unable to get value of the property 'makeID': object is null or undefined". IE's developer tools point to the first loop as the problem but I cannot figure out what is wrong.



$(function() {
var makeList = {
"makeTable": [
{"makeID": "0", "makeName": "Select your make"},
{"makeID": "1", "makeName": "Make 1"},
{"makeID": "2", "makeName": "Make 2"},
{"makeID": "3", "makeName": "Make 3"},
]
};

var modelList = {
"Make 1": [
{"modelID": "1", "modelName": "Make 1 Model 1"},
{"modelID": "2", "modelName": "Make 1 Model 2"},
{"modelID": "3", "modelName": "Make 1 Model 3"},
{"modelID": "4", "modelName": "Make 1 Model 4"},
{"modelID": "5", "modelName": "Make 1 Model 5"},
{"modelID": "6", "modelName": "Make 1 Model 6"}
],
"Make 2": [
{"modelID": "1", "modelName": "Make 2 Model 1"},
{"modelID": "2", "modelName": "Make 2 Model 2"},
{"modelID": "3", "modelName": "Make 2 Model 3"},
{"modelID": "4", "modelName": "Make 2 Model 4"},
{"modelID": "5", "modelName": "Make 2 Model 5"},
{"modelID": "6", "modelName": "Make 2 Model 6"}
],
"Make 3": [
{"modelID": "1", "modelName": "Make 3 Model 1"},
{"modelID": "2", "modelName": "Make 3 Model 2"},
{"modelID": "3", "modelName": "Make 3 Model 3"},
{"modelID": "4", "modelName": "Make 3 Model 4"},
{"modelID": "5", "modelName": "Make 3 Model 5"},
{"modelID": "6", "modelName": "Make 3 Model 6"}
]
};


var makeItems = "";
for (var i = 0; i < makeList.makeTable.length; i++) {
makeItems += "<option value='" + makeList.makeTable[i].makeID + "'>" + makeList.makeTable[i].makeName + "</option>";
}

$("#makeSelect").html(makeItems);

var updateModelSelect = function(make) {
var listItems = "";
for (var i = 0; i < modelList[make].length; i++) {
listItems += "<option value='" + modelList[make][i].modelID + "'>" + modelList[make][i].modelName + "</option>";
}
$("select#modelSelect").html(listItems);
};

$("select#makeSelect").on('change', function() {
var selectedMake = $('#makeSelect option:selected').text();
updateModelSelect(selectedMake);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>Make</label>
<select id="makeSelect">
</select>
<br />

<label>Model</label>
<select id="modelSelect">
</select>




Answer

The problem is the extra comma in the array:

    "makeTable": [
        {"makeID": "0", "makeName": "Select your make"}, 
        {"makeID": "1", "makeName": "Make 1"}, 
        {"makeID": "2", "makeName": "Make 2"}, 
        {"makeID": "3", "makeName": "Make 3"}, 
    ]
};

Recent versions of Javascript allow an optional comma after the last item in an array or object literal, and ignore it. IE8 treats this as indicating another array element whose value is undefined, so it adds 1 to the length of the array. When you try to access the properties of this element, you get the error.

Change it to:

    "makeTable": [
        {"makeID": "0", "makeName": "Select your make"}, 
        {"makeID": "1", "makeName": "Make 1"}, 
        {"makeID": "2", "makeName": "Make 2"}, 
        {"makeID": "3", "makeName": "Make 3"}
    ]
};
Comments