JSLink Loop ends after first row

Question

I'm hoping that you can help me with this issue. I've been wrestling with this one for days. I've been following everyone's posts for OnPostRender. I want to change the background color of the row based on a person field called Lead Capture. For some reason it will only change the background color of the first row. It seems as if the code leaves the loop after the first row and I can't figure out why. Thank you for your help.

    (function () { 
        var overrideCtx = {};
        overrideCtx.Templates = {};
        overrideCtx.OnPostRender = HighlightRowOverride;

        // Register the template overrides.
   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
 })();

         var statusColors =  {
              'Jimmy' : '#8B0000',  
              'Robby' : '#ff6a00',
              'Ricky' : '#1E90FF',
              'Sally' :  '#4B0082',
              'Jane' : '#B8860B',
              'Roy' : '#FFD700',
              'Mike' : '#006400'};

    function HighlightRowOverride(ctx)
    {
         var rows = ctx.ListData.Row;
         var i;

         for (i = 0; i < rows.length; i++) 
        {
             var users = rows[i]["Lead_x0020_Capture"];
             var curUserName = users[i].title;
             var status = curUserName; 
             var rowId = GenerateIIDForListItem(ctx, rows[i]);
             var row = document.getElementById(rowId); 

             if (row != null)
             {
                  row.style.backgroundColor = statusColors[status];
             }
         }
    } 

Answer 1

The error is probably in the line

var curUserName = users[i].title;

since you are using the loop index (which is incrementing based on the number of rows) to index into the users user field array.

Since my guess is you only have one user per Lead_x0020_Capture field, all users arrays will only have index 0, so by the time you get to the second row (index 1), you will get an "index out of range" error when you try to access the user title there.

Try

var curUserName = users[0].title;

instead.

Answer 2

Add a debugger; just above the for loop and press F10 to step through the code. You should be able to spot the place where the loop breaks. F11 will step into a function, if needed. A try/catch may help too.

Answer 3

Your code is probably erroring out inside the loop and the error is caught my MS code and not outputted to the console?

wrap your loop in your own own error handler, using debugger is a slow step-by-step proces:

try{
  //your for loop
}catch(e){
  console.error(e);
}

And see what shows up in F12

Better is to simplify your code; ditch the for loop and use a modern forEach see: Color Row if Date in column = Sysdate in SharePoint Foundation 2013 using CSR