迭代关联数组花费的时间太长

Question

I am having this javascript object which contains city list along with dependency details on state.

var cityList = {
'1' : ['CITY_CODE_A','City A', '2','11','2'],
'2' : ['CITY_CODE_B','City B','','11',''],
'3' : ['CITY_CODE_C','City C', '','11','']
};
var stateList = {
'11' : ['STATE_CODE_A', 'State A'],
'12' : ['STATE_CODE_B', 'State B'],
'13' : ['STATE_CODE_C', 'State C'],
'14' : ['STATE_CODE_D', 'State D']
};

Depending on the state selected, key is passed to a function which matches the key with the values (index 3 element in array) in the city list and if found forms an option tag of <select> . Here is the code :

$.each(cityList, function(key, value) {
  if(selectedVal == value[3]){
  $("select[id='"+selectid+"']").append('<option value="'+value[0]+'" code="'+key+'">'    +value[1] + '</option>'); 
  }
});

Now when this city list grows to 50K records (2 MB) wiz a state has 50K cities (performance testing) the above code takes 2 mins to load the city list dropdown on Windows 7 machine running the code locally. Tried with native for / in -loop but did not get satisfactory outcome.

Any ideas on how to reduce the time ? Do I need to change the JS object structure?

Answer 1

I am also a friend of better use of search instead of 50k scrolldown items. But to answer your question I would improve your code by using:

var html = '';
$.each(cityList, function (key, value) {
    html += '<option value="' + value[0] + '" code="' + key + '">' + value[1] + '</option>'
});

$("select[id='1']").append(html);

This will speed up your option creation a lot because the DOM will only be changed one time, not 50k times like you said in your example. ( Short Demo )

Answer 2

Edit: @downvoters, could you explain why you think it's wrong? But first try running this test .

If you want to get cities for a particular state you could create a map where state IDs are the key,

var cityList = {
   11 : [ ['CITY_CODE_A','City A', '2','11','2'], ['CITY_CODE_B','City B','','11',''] ],
   12 : [ ['CITY_CODE_C','City C', '2','12','2'], ['CITY_CODE_D','City D','','12',''] ]
}

Now you only need to iterate over citylist[ selectedVal ]

$.each(cityList[selectedVal], function(key, value) {
  $("select[id='"+selectid+"']").append('<option value="'+value[0]+'" code="'+key+'">'    +value[1] + '</option>'); 
});

To optimize it further you should avoid DOM manipulation (adding <option> elements) in a loop, and buffer it instead:

var $selectEl = $('<select />');
$.each(cityList[selectedVal], function(key, value) {
  $selectEl.append('<option value="'+value[0]+'" code="'+key+'">'    +value[1] + '</option>'); 
});
$selectEl.attr( 'id', selectid );
$("select[id='"+selectid+"']").replaceWith( $selectEl );