How to optimize this JSON/JQuery/Javascript function in IE7/IE8?

Posted by melaos on Stack Overflow See other posts from Stack Overflow or by melaos
Published on 2010-04-12T11:40:36Z Indexed on 2010/04/12 11:43 UTC
Read the original article Hit count: 480

Filed under:
|
|
|

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?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JSON