How to optimize this JSON/JQuery/Javascript function in IE7/IE8?
- by melaos
hi guys,
i'm using this function to parse this json data but i find the function to be really slow in IE7 and slightly slow in IE8.
basically the first listbox generate the main product list, and upon selection of the main list, it will populate the second list.
this is my data:
[{"ProductCategoryId":209,"ProductCategoryName":"X-Fi","ProductSubCategoryId":668,"ProductSubCategoryName":"External Solutions","ProductId":15913,"ProductName":"Creative Xmod","ProductServiceLifeId":1},{"ProductCategoryId":209,"ProductCategoryName":"X-Fi","ProductSubCategoryId":668,"ProductSubCategoryName":"External Solutions","ProductId":15913,"ProductName":"Creative Xmod","ProductServiceLifeId":1},{"ProductCategoryId":209,"ProductCategoryName":"X-Fi","ProductSubCategoryId":668,"ProductSubCategoryName":"External Solutions","ProductId":18094,"ProductName":"Sound Blaster Wireless Receiver","ProductServiceLifeId":1},{"ProductCategoryId":209,"ProductCategoryName":"X-Fi","ProductSubCategoryId":668,"ProductSubCategoryName":"External Solutions","ProductId":16185,"ProductName":"Xdock Wireless","ProductServiceLifeId":1},{"ProductCategoryId":209,"ProductCategoryName":"X-Fi","ProductSubCategoryId":668,"ProductSubCategoryName":"External Solutions","ProductId":16186,"ProductName":"Xmod Wireless","ProductServiceLifeId":1}]
and these are the functions that i'm using:
//Three Product Panes function
function populateMainPane() {
$.getJSON('/Home/ThreePaneProductData/', function(data) {
products = data;
alert(JSON.stringify(products));
var prodCategory = {};
for (i = 0; i < products.length; i++) {
prodCategory[products[i].ProductCategoryId] = products[i].ProductCategoryName;
} //end for
//take only unique product category to be used
var id = 0;
for (id in prodCategory) {
if (prodCategory.hasOwnProperty(id)) {
$(".LBox1").append("<option value='" + id + "'>" + prodCategory[id] + "</option>");
//alert(prodCategory[id]);
}
}
var url = document.location.href;
var parms = url.substring(url.indexOf("?") + 1).split("&");
for (var i = 0; i < parms.length; i++) {
var parm = parms[i].split("=");
if (parm[0].toLowerCase() == "pid") {
$(".PanelProductReg").show();
var nProductIds = parm[1].split(",");
for (var k = 0; k < nProductIds.length; k++) {
var nProductId = parseInt(nProductIds[k], 10);
for (var j = 0; j < products.length; j++) {
if (nProductId == parseInt(products[j].ProductId, 10)) {
addProductRow(nProductId, products[j].ProductName);
j = products.length;
}
} //end for
}
}
}
});
} //end function
function populateSubCategoryPane() {
var subCategory = {};
for (var i = 0; i < products.length; i++) {
if (products[i].ProductCategoryId == $('.LBox1').val())
subCategory[products[i].ProductSubCategoryId] = products[i].ProductSubCategoryName;
} //end for
//clear off the list box first
$(".LBox2").html("");
var id = 0;
for (id in subCategory) {
if (subCategory.hasOwnProperty(id)) {
$(".LBox2").append("<option value='" + id + "'>" + subCategory[id] + "</option>");
//alert(prodCategory[id]);
}
}
} //end function
is there anything i can do to optimize this or is this a known browser issue?
