JS Array Loop Number is 1 Off

Question

I'm importing json data and looping through divs to supply them with object values. The divs in my array begin with a number but the first number is 0. I understand why this is, but how do I fix this to start the first div with 1 and not 0?

Thanks

$.ajax({
    url: "Brackets.json",
    dataType: "json",
    success: function(data) {

    var items = [ "#bracket1", "#bracket2", "#bracket3", "#bracket4", "#bracket5", "#bracket6", "#bracket7", "#bracket8",
    "#bracket9", "#bracket10", "#bracket11", "#bracket12", "#bracket13", "#bracket14", "#bracket15", "#bracket16"];

    var len = items.length;

    for ( var i = 0; i < len; i++ ) {
        console.log(len);
        $(items[i]).html( i + ". " + dataTeamsData + items[i]);
    }

Answer 1

In your loop, do this:

for ( var i = 0; i < len; i++ ) {
    console.log(len);
    var itemNum = i + 1;
    $(items[i]).html( itemNum + ". " + dataTeamsData + items[i]);
}

itemNum will start at 1, while the item from the array will still be fetched by the index value i which starts at 0.

Alternatively, instead of this:

<div>1. item0</div>
<div>2. item1</div>
<div>3. item2</div>
...

Use an ordered list element with list items:

<ol>
    <li>item0</li>
    <li>item1</li>
    <li>item2</li>
    ...
</ol>

Then you don't have to worry about the number as it will be generated automatically.