Creating rows from JSON data

Question

I am getting data from JSON and then create rows of it:

        $.each(data.GetwebMethodResult, function (index, item) {
        $("#TableABC").append(FunABC(item.aID, item.b, item.c, item.d, item.e, item.f));
        });

function FunABC(a, b, c, d, e, f) {
    var row =
        "<tr class='Row' onclick=\"AnotherUnrelatedFunction('" + a + "' , '" + b + "', '" + c + "', '" + d + "', '" + e + "', '" + f + "')\">" +
        "   <div class='mr'>" +
        "       <td class='mc mci'>" +
        "           <div class='mcit'>" + a + "</div>" +
        "       </td>" +
        "   </div>" +
        "</tr>";

    return row;
}

Is there any better way of doing it?

Answer 1

I would think so;

• encoding listeners through HTML onclick is old skool
• variable names a,b,c,d,e,f earn an award for 2014 worst variable names
• instead of sending just the item, you are sending every property you need.
• you are setting content and listeners in one place ( mixing view and controller )
• You have a div between tr and td, which should not even work

I would counter-propose something like

$.each(data.GetwebMethodResult, function (index, item)
{
  $("#TableABC").append( $(generateRow(a)).click( function(){ 
    anotherUnrelatedFunction( item );
  }));
});

function generateRow(a) 
{
  return '<tr class="Row mr">' + 
           '<td class="mc mci">' + 
             '<div class="mcit">' +
               a + 
             '</div>' +
           '</td>' + 
         '</tr>';
}

This basically keeps the HTML stringing separate from the onClick handler assignment. Through closure it passes the entire item object to anotherUnrelatedFunction which means the signature becomes more concise (you would have to adjust anotherUnrelatedFunction obviously).

Answer 2

Not really. It hard to optimize something with little logic. You could do this instead:

var row =
    "<tr class='Row' onclick=\"AnotherUnrelatedFunction('" + a + "' , '" + b + "', '" + c + "', '" + d + "', '" + e + "', '" + f + "')\> \
       <div class='mr'> \
           <td class='mc mci'> \
               <div class='mcit'>" + a + "</div> \
           </td> \
       </div> \
    </tr>";

But aside from that looks good!

Answer 3

Since you didn't specifically state you didn't want to use a third party library, I am going to recommend you look at underscore and it's template function. There are other template engines (mustache.js also comes to mind). These excel at doing exactly what you are trying to do.