AJAX with sync error

Question

Talk to the guys, all right? I have a boring problem, and as I have never used AJAX in my life I think the problem is me :( Basically it’s like this, I have a GET that returns me the following JSON:

{
"result": 1,
"content": [
    {
        "PessoaId": "2",
        "PessoaNome": "Otavio",
        "PessoaTimeId": "1",
        "PessoaCategoriaId": "0",
        "Treinos": [
            {
                "TreinoId": "2",
                "TreinoNome": "Resistencia",
                "TreinoData": "2015-10-19",
                "TreinoHorario": "15:44:00",


            }
        ]
    }
],
}

Okay, so I have my web page that wants to list people. Everything quiet until then, listing, editing, deleting etc. But I want to have the option to click on an icon and open a modal with the TRAININGS of that person in question. The problem is there, I did something but it didn’t work. Follow the code:

function getTreinos(AvaliacaoId){
var url = '../getters/getAvaliacaoById.php?TimeId='+TimeId+'&AvaliacaoId='+AvaliacaoId;
var data = "";

    $.get(url, function(response){
        serverResponse = response;
        console.log(response.content.Treinos);
         if(response.result == 1){
            for(i in response.content.Treinos){
                console.log(response.content.Treinos);
                 data +='\
                <tr>\
                    <td> </td>\
                    <td>'+response.content[i].Treinos.TreinoNome+'</td>\
                    <td></td>\
                    <td>'+response.content[i].Treinos.TreinoData+'</td>\
                    <td>'+response.content[i].Treinos.TreinoHorario+'</td>\
                    <td>'+response.content[i].Treinos.TreinoFinalizado+'</td>\
                    <td></td>\
                </tr>';
       }
        $('.treino-body').append(data);           

        var width = new Array();
        $(".treino-body tr:eq(0)").find('td').each(function (position){
            width[position] = $(this).outerWidth();
        });
        $(".treino-header tr").find('th').each(function (position){
            $(this).css("width", width[position]+5);
        });
           callModalNovo();

    }
else
    alert(response.exception);
    });

}

He, when he opens the modal, gives me that the attributes are Undefined. I looked around and it seems that it is something with the synchronization of AJAX. Does anyone have any other logic to do this? Grateful

Answer 1

I don’t know if you typed this JSON in your hand, but it is incorrect. Paste the contents on the site Jsonlint.com to see the result. Check if your GET method really is returning a valid JSON, which in case would be:

{
    "result": 1,
    "content": [
        {
            "PessoaId": "2",
            "PessoaNome": "Otavio",
            "PessoaTimeId": "1",
            "PessoaCategoriaId": "0",
            "Treinos": [
                {
                    "TreinoId": "2",
                    "TreinoNome": "Resistencia",
                    "TreinoData": "2015-10-19",
                    "TreinoHorario": "15:44:00"
                }
            ]
        }
    ]
}

Afterward to check and fix the return of JSON, you need to turn your JSON string into a Javascript object:

$.get(url, function(response){
    response = JSON.parse(response);

    ... resto do código ...
}

Answer 2

The biggest problem is that you are looping into nothing, because vc has an array and then there is another array inside, besides, the way you formatted the HTML break is incorrect too, I made an example based on the bootstrap working for you to have an idea:

Modal:

<!-- 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 1
   </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 hidden new" data-dismiss="modal">Novo botão</button>  
           <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>

Code Avascript:

$(document).ready(function() {

    $('#element').on('show.bs.modal', function(event) {

        $target = {};

        ['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());
        if ($target.id == 1) {
            var buttons = $target.button.split('|');

             $(".close-changes").text(buttons[0]);
             $(".save-changes").text(buttons[1]);
        }
 });

});

  function myHTML() {
      var 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",
                            }
                        ]
                    }
                ],
                }
          if (response.result == 1) {
           var list = [];
            if (response.content.length > 0) {
               list = ['<tr>',
                        '<td>',response.content[0].Treinos[0].TreinoId,'</td>',
                        '<td>',response.content[0].Treinos[0].TreinoNome,'</td>',
                        '<td>',response.content[0].Treinos[0].TreinoData,'</td>',
                        '<td>',response.content[0].Treinos[0].TreinoHorario,'</td>',
                     '</tr>'].join("\n");
            }
       return '<table class="table table-bordered">' + list + '</table>'; 
       }
  }

Here he’s spinning around: http://jsfiddle.net/ivanferrer/faf63qL8/