Modal de tabela de dados jSON

by Ivan Ferrer

HTML

<!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-lg" data-id="1" data-toggle="modal" data-title="Treinos" data-target="#element" data-button="Salvar|Fechar">
     Abrir Modal
   </button>

 <!-- Modal -->
   <div class="modal fade" id="element" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">Modal title 1</h4>
         </div>
         <div class="modal-body">
             content entra aqui
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default close-changes" data-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary save-changes" data-dismiss="modal">Save changes</button>
         </div>
       </div>
     </div>
   </div>

JavaScript

$(document).ready(function() {
    
    $('#element').on('show.bs.modal', function(event) {
        
        //aqui você pode trocar por:
         /*  
           var $target = {}, 
           responde = getTreinos(TimeId, AvaliacaoId);
         
         */
         var $target = {},
             response = {
                "result": 1,
                "content": [
                    {
                        "PessoaId": "2",
                        "PessoaNome": "Otavio",
                        "PessoaTimeId": "1",
                        "PessoaCategoriaId": "0",
                        "Treinos": [
                            {
                                "TreinoId": "2",
                                "TreinoNome": "Resistencia",
                                "TreinoData": "2015-10-19",
                                "TreinoHorario": "15:44:00",
                            }
                        ]
                    }
                ],
                };  
        
     
        ['id','button', 'title','content'].forEach(function(value, key) {
            $target[value] = $(event.relatedTarget).data(value);
        });
        
       $(".new").addClass('hidden');
        $(".modal-title").text($target.title);
        $(".modal-body").html(myHTML(response));
        if ($target.id == 1) {
            var buttons = $target.button.split('|');
            
             $(".close-changes").text(buttons[0]);
             $(".save-changes").text(buttons[1]);
        }
 });
  
});

  function myHTML(response) {
     
          if (response.result == 1) {
           var list = [];
            if (response.content.length > 0) {
               list[0] = ['<tr>',
                            '<th>ID</th>',
                            '<th>Nome</th>',
                            '<th>Data</th>',
                            '<th>Horário</th>',
                          '</tr>'].join("\n"); 
               list[1] = ['<tr>',
                       ...