Array iteration issue in Javascript

Question

I´m trying to make a function that reads elements from an array and distributes its values to <tr> tags of a table. So I wrote this code:

(function () {
  "use strict";
  var selectQG = {
    distributeCat : function (tablerow, categories) {
      var tr = $(tablerow), tri = 0;
      tr.each(function () {
        if (tri > 2) {
          for (var i = 0; i<categories.length; i++) {
            this.setAttribute('categoria',categories[i]);
          }
        }
        tri++;
      });
    }
  }
  var categories = ['1,2','3,4','5,6','7,8','9,10','11,12'];
  selectQG.distributeCat('table tr', categories);
} () );

Check this fiddle to see the html code and the function working: http://jsfiddle.net/5kqEf/2/ )

The loop is being executed 6 times and I can´t figure out why. I´m still a novice at programming, so I´m in need of some help to know what I´m doing wrong. Any help would be very appreciated.

EDIT: The ideia is that every <tr> get the array value. It is supposed to happen starting from the 3rd <tr>, that´s why I put that "if" conditional. So, the first <tr> get "categories[1]", the second <tr> get "categories[2]" and so on.

Which loop are you referring to? The for loop iterates over an array categories with 6 entries, so that makes sense... — mellamokb
– mellamokb, Commented May 15, 2012 at 12:44

Willem Mulder · Accepted Answer · 2012-05-16 10:38:41Z

1

The outer loop is executed 9 times, since you have 9 table tr elements. The .each will loop over every tr element, which happen to be 9 elements. See http://jsfiddle.net/5kqEf/4/

The inner for loop loops over 6 elements (the array var categories = ['1,2','3,4','5,6','7,8','9,10','11,12'];), so that makes sense...

What is your exact question?

If you want to pick a categorie based on index (and startover if there are more tr elements than categories), you might want to replace this:

 for (var i = 0; i<categories.length; i++) {
    this.setAttribute('categoria',categories[i]);
 }

with this

var index = tri % categories.length;
this.setAttribute('categoria',categories[index]);

See https://developer.mozilla.org/en/JavaScript/Reference/Operators/Arithmetic_Operators for use of the modulus operator.

edited May 16, 2012 at 10:38

answered May 15, 2012 at 12:46

Willem Mulder

14.1k4 gold badges42 silver badges64 bronze badges

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

3 Comments

darksoulsong Over a year ago

Well, the idea is that each array value is distributed for each tr tag. But due to the extra iteration, when the loop is done, the tr tags get all the some attribute, that is, the last value of the array.

Willem Mulder Over a year ago

If you want for every tr the next category, then don't loop but use an index var to pick the correct category. I updated my answer above!

darksoulsong Over a year ago

Nice, thanks for the link about the operators. That will help me a lot =)

Collectives™ on Stack Overflow

Array iteration issue in Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related