Nested Table Views

HTML

<title>Superheroes and villains</title>

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.0.0-beta5-bundled/backbone.marionette.js"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>




                  <body>
                    <main>

                      <h1>Table</h1>
                      <p>
                        Simple Table rendered with a composite view.
                      </p>

                      <h1>Example</h1>

                      <div class="list"></div>
                    </main>


                    <script type='text/template' id='template-table'>
                        <table class="table table-hover table-striped table-bordered">
                            <thead>
                                <td>Reason</td>
                                <td>Error Code</td>
                                <td>Non Recurring</td>
                                <td>Real Total</td>
                                <td>Recurring</td>
                            </thead>
                            <tbody class="myBody">

                            </tbody>
                        </table>
                    </script>
                    <script type='text/template' id='template-color-item'>
                        <td><%= reason %></td>
                        <td><%= errorcode %> </td>
                        <td><%= nonrecurring %></td>
                        <td><%= realtotal %></td>
                        <td><%= recurring %></td>
                    </script>
                   ...

JavaScript

(function() {

  // Here's the list of objects that we will be displaying
  var a = JSON.parse('{"type":"report","limit":20,"offset":0,"data":[{"group":"platform","detail":[{"reason":"Invalid Issuer","errorcode":"123456","total":"1","realtotal":"1","nonrecurring":"1","recurring":"0"},{"reason":"Declined","errorcode":"111111","total":"1","realtotal":"1","nonrecurring":"1","recurring":"0"},{"reason":"Insufficient funds","errorcode":"52252","total":"1","realtotal":"1","nonrecurring":"1","recurring":"0"}]},{"group":"gateway","detail":[{"reason":"Transaction timed out","errorcode":"52525","total":"7","realtotal":"3","nonrecurring":"7","recurring":"0"},{"reason":"Error","errorcode":"623","total":"7","realtotal":"3","nonrecurring":"7","recurring":"0"}]}],"page":"1"}');

  var detailsArrays = a.data.map(function(obj) { return obj.detail; });
  var details = _.flatten(detailsArrays);
  var collection = new Backbone.Collection(details);
  
  var ItemView = Marionette.ItemView.extend({
      className: 'item-view',
      tagName: 'tr',
      template: '#template-color-item',
  });

  var TableView = Marionette.CompositeView.extend({
      template: '#template-table',
      className: 'table-view',
      tagName: 'table',

      itemViewContainer: 'tbody',
      itemView: ItemView
  });


  var table = new TableView({
      el: '.list',
      collection: collection
  });

  table.render();

})();