Unsuccessful when counting rows in a JS database

I want to count all the rows in my TaffyDB. I added the following where the rows are being asked to be displayed:

	var num = 1; num++;

Then I added the num to the output for displaying each row on the page, thinking I’ll be numbering each item:

output.innerHTML+=num + imageThumbSrc;

However, all I get is the digit “2” repeated for each row output at num.

How do I get them numbered sequentially?

think we’re going to need to see a little bit more of the code than that to make sense of how you’re flowing it…

(Why would a row counter start at 1? You dont know that there will be rows?)

I’ll paste in the full code when I get back to work tomorrow.

All the examples of row counting I’ve seen start with 0!

I know there are over 500 rows total. Eventually, once I get this figured out, I’ll count certain filtered rows and also the whole thing.

Not sure what you trying to do but why don’t you use

db().length

Think he wants the row index, rather than a total?

(S’why I want to see the looping… most loops will let you pull the index from the loop itself, rather than needing to count yourself)

It is obvious that “imageThumbSrc” is not a number or is zero.
Are there any error messages being generated?
And why “var num = 1; num++;”
Why not just “var num = 2;”?

You have mistaken mathematical addition and string concatenation in Javascript.

I assume those are separate, and that he’s initialized the variable outside his loop and incrementing it inside the loop. Again, without seeing it, I cant say for certain.

// REPEATING ELEMENTS -- part listing of rows
 db({heading:show}).each(function (name){ // 'show' and 'heading' = yearxxxx; "name" is an alias
    var partNo       = name.partNo; // part no in listing row
    var partName     = name.partName; // part name in listing row
    var imageThumb   = name.imageThumb + "-sm"; // thumbnail in listing row; 'blank-sm' if no thumbnail
    var yearHistory  = name.yearHistory; // like 1999
    var breakpoint   = name.breakpoint; // present only if adding a solid line above this record
**var num = 1; num++;**

    // construct and target the unique outputxxxx innerHTML div id
    var output = "output" + yearHistory;
        output = document.getElementById(output); // will write the innerHTML to here
        
    if(breakpoint === "---"){output.innerHTML+="<span class='breakhr'></span>";} // create a solid line above this record

    // show full size image and caption in modal  
    var popupId       = name.popupId; // identify the modal for this record
    var popupContent  = name.popupContent; // the modal caption
    var popupImage   = name.imageThumb; // thumbnail in listing row; 'blank' if no thumbnail
    // if imageThumb is other than 'blank', construct the code to write out the parts listing and make the modal when thumbnail is clicked
    var imageThumbSrc = "<span style='width:7em'>#" + partNo + "</span><span style='width:100px'><a href='#" + popupId  + "'><img class='imgThumb' src='images/" + imageThumb + ".jpg'></a></span><span>" + partName + "</span><br><div id='" + popupId + "' class='popup'><div class='popup__block'><img class='image_thumb' style='width:100%; border:1px black solid;' src='images/" + popupImage + ".jpg'><p class='ppcontent'>" + popupContent + "</p><a href='#" + output + "' class='popup__close'>Close</a></div></div>";

    // don't display thumbnail if imageThumb = "blank", otherwise an "image broken" icon will show
    if(imageThumb === "blank"){imageThumbSrc = "<span style='width:7em;'>#" + partNo + "</span><span style='width:100px;'><img class='image_thumb' src='images/" + imageThumb + ".jpg' style='height:4px;'></span><span>" + partName + "</span><br>";} 
    **output.innerHTML+=num + imageThumbSrc;**
    });
 }

okay… yeah… why are we defining a counter inside the loop?

If you define the variable inside the loop, it gets redefined on each iteration of the loop.
var num = 1; num++;
will literally just set num to 2 on every loop.

I dont know where this .each function comes from (because i dont know what db is), but does the documentation for that function not include an option for an index?

Lacking that, move var num = 1 outside the loop (before the first commented line there. Probably change it to 0.
Leave the num++ inside the loop.

You’re probably going to want to play around with the output a bit, because right now you’re just literally sticking the number in there before the span. But that’s probably just something to play with later.

I got the num to work! Thanks.

db is:

 function getData(){
 	"use strict";
 var db = TAFFY([
 {
 yearHistory: 1970, // ******************** 1970
 heading:"year1970",
 partNo:"name of car",
 partName:"Complete Car Kit [release year is approximate]",
 },

How do I make this work:

var dbLength = db().length; console.log(dbLength);

ah okay, it’s a TaffyDB. That’s important to know. (And… yaknow, if i actually used my eyes and read the first post completely…i’d know that already.)
I… dont know if you can do length with a TaffyDB. You can do count() though.
db().count() will return the number of records in the database.

I put it at the end:

    output.innerHTML+=num + imageThumbSrc; 
    });
	var dbLength = db().count;
	console.log(dbLength);

It doesn’t return a number in the console but this in italics:

f (){return _e_.apply(this,_x_(arguments))}

count is a function.

OK, I got the number to show in console! Thanks so much.

1 Like