Shorter alternative for this jquery / javascript loop?

Question

At a certain point in my webapp I have the following (large) series of loops:

jQuery.each(GO, function(index, item){  $("#GO_PUBS").append(
"<li><a href=javascript:dopage('"+item+"');>"+GO_desc[index]+"</a></li>");});

jQuery.each(AP, function(index, item){  $("#AP_PUBS").append(
"<li><a href=javascript:dopage('"+item+"');>"+AP_desc[index]+"</a></li>");});

jQuery.each(BV, function(index, item){  $("#BV_PUBS").append(
"<li><a href=javascript:dopage('"+item+"');>"+BV_desc[index]+"</a></li>");});

jQuery.each(FI, function(index, item){  $("#FI_PUBS").append(
"<li><a href=javascript:dopage('"+item+"');>"+FI_desc[index]+"</a></li>");});

The loop goes on and on but the pattern is always the same.

Is there any way I can make it way shorter by using some sort of array or list instead of explicitly writing it loop?

Thanks

that you have for each XX an XX_desc array too suggests that you should fix your internal data representation first. Perhaps (for example) you need a 2D structure, not a whole load of separate 1D structures? — Alnitak
– Alnitak, Commented Jun 30, 2013 at 20:30
p.s. why use inline event handlers when you could have jQuery register the handlers, and make the page more efficient in the process. — Alnitak
– Alnitak, Commented Jun 30, 2013 at 20:33

sdespont · Accepted Answer · 2013-06-30 20:31:29Z

1

DRY (Do not Repeat Yourself) : Start by creating a function to do that :

   function createLink(a,b,c){
        jQuery.each(a, function(index, item){  $(b).append(
        "<li><a href=javascript:dopage('"+item+"');>"+c[index]+"</a></li>");});
    }

And call

createLink(BV,"#BV_PUBS",BV_desc);

answered Jun 30, 2013 at 20:31

sdespont

14.1k9 gold badges61 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shaddow · Accepted Answer · 2013-06-30 20:31:42Z

1

function xxx(a, b, c) {
    jQuery.each(a, function(index, item){
        $(b).append("<li><a href=javascript:dopage('"+item+"');>"+c[index]+"</a></li>");
    });
}

xxx(GO, "#GO_PUBS", GO_desc);
xxx(AP, "#AP_PUBS", AP_desc);
xxx(BV, "#BV_PUBS", BV_desc);
xxx(FI, "#FI_PUBS", FI_desc);

answered Jun 30, 2013 at 20:31

Shaddow

3,2333 gold badges25 silver badges42 bronze badges

Comments

score 0 · Accepted Answer · 2013-06-30 20:56:17Z

0

Something like this:

var iterator = function(id, array) {
  var $holder = $("#" + id);
  return function(index, item) {
    $holder.append("<li><a href=javascript:dopage('"+item+"');>"+array[index]+"</a></li>");
  };
};

jQuery.each(GO, iterator('GO_PUBS', GO_desc));
jQuery.each(AP, iterator('AP_PUBS', AP_desc));
jQuery.each(BV, iterator('BV_PUBS', BV_desc));
jQuery.each(FI, iterator('FI_PUBS', FI_desc));

If you are able to get hold of all the array(GO, AP,..) in a map like this:

var collection = {'GO': {asc: GO, desc: GO_desc}, ...};

You will be able to do something like this:

for(var key in collection) {
  if(collection.hasOwnProperty(key)) {
    var arrMap = collection[key];
    jQuery.each(arrMap.asc, iterator(key + '_PUBS', arrMap.desc));
  }
}

Update:

With 3D array:

var 3dArr = [['GO', GO, GO_desc], ...], 3dArrLen = 3dArr.length, i = 0;
for(i; i < 3dArrLen; i++) {
  var v = 3dArr[i];
  (function(id, arr, arr_desc) {
    jQuery.each(arr, iterator(id + '_PUBS', arr_desc));
  })(v[0], v[1], v[2]);
}

edited Jun 30, 2013 at 20:56

answered Jun 30, 2013 at 20:32

user405398

4 Comments

Alnitak Over a year ago

Note that in the comments to the question I suggested a 2D array, not an object, because using an object as a map as you have does not guarantee iteration order.

user405398 Over a year ago

oh! I was not aware of OP's concerns about order. Let add that too! Thanks!

Alnitak Over a year ago

strictly speaking the OP hasn't expressed any concerns, but I think it's reasonable to assume that the elements need to be displayed in the order shown in the question.

user405398 Over a year ago

hey, np... I too think thats good. The reason why i used map is OP needs the id. So, I used key for that. Now, since it is array, it has to be 3D to include the id key.

Collectives™ on Stack Overflow

Shorter alternative for this jquery / javascript loop?

3 Answers 3

Comments

Comments

Update:

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Update:

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related