CODEWITHSUNDEEP
javascriptjquery
Aessandro
Aessandro

Reputation: 5771

jQuery load template inside a loop

I have a json file with some data and I am using a Js loop to load a jQuery template to iterate through and load a table made of 4 rows based on the data, so far I only get the last row. https://github.com/codepb/jquery-template

<script type="text/html" id="tableContent">
  <tr>
    <th>Key</th>
    <th>Product</th>
    <th>Bookings</th>
    <th>%</th>
    <th>Transactions</th>
  </tr>
  <tr>
    <td data-content="">sth</td>
    <td data-content="Product"></td>
    <td data-content="Bookings"></td>
    <td data-content="Percentage"></td>
    <td data-content="Transactions"></td>
  </tr>
</script>

      function builTable(){
          var table = "",
              colors = ['col1', 'col2', 'col3', 'col4', 'col5', 'col6'];

          for(i = 0; i< source.Products.length; i++){

            $("table").loadTemplate($("#tableContent"),

{


            Product: source.Products[i].Product,
            Bookings: source.Products[i].Bookings,
            Percentage: source.Products[i].Percentage,
            Transaction: source.Products[i].Transaction

} ); 

  $(document).ready(function(){

    builTable();

  });

<table border="1" cellpadding="2">



</table>

Is there something wrong inside the loop?

http://jsfiddle.net/9JV7t/1/

Upvotes: 1

Views: 1802

Answers (1)

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

I think you just need to add an array because it loads the whole content just once and then overrides it again. But therefore you need to only include the data rows in the template and add the headings to the table (DEMO):

<script type="text/html" id="tableContent">
    <tr>
        <td data-content="">sth</td>
        <td data-content="Product"></td>
        <td data-content="Bookings"></td>
        <td data-content="Percentage"></td>
        <td data-content="Transactions"></td>
    </tr>
</script>

Your table:

<table>
    <thead>
        <tr>
            <th>Key</th>
            <th>Product</th>
            <th>Bookings</th>
            <th>%</th>
            <th>Transactions</th>
        </tr>    
    </thead>
    <tbody>

    </tbody>
</table>

And the js:

function builTable(){
     $("tbody").loadTemplate($("#tableContent"), source.Products); 
}

Upvotes: 1

Related Questions