how to put the return of a json in a specific place of a table? [duplicate]

0

I have a fixed table with schedules from 8:00 am until 7:00 pm each has its line with its description (which would be the type of query)

I get a json on my page when selecting a date in my jQuery datepicker that comes with the database information. in this bank what matters to us is the query schedule and the type of query ..

What I need to do is to check the return times and place the description in its place in the table. for example: I have 2 queries, one at 8:00 am and another at 5:00 pm (remembering that each has its own description). I need to put these descriptions in the table that is already created in the hours 08:00 and 17:00 .. as for the other schedules leave empty

Follow my code:

  

html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Agenda</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" media="screen">
 </head>

     <body>

        <div id="datepicker"></div> <br>
        <div id="teste"> </div>

    <table border="1">  
    <tr>
        <td>08:00</td>
        <td> </td>
    </tr> 
    <tr>
        <td>8:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>9:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>9:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>10:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>10:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>11:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>11:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>12:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>12:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>13:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>13:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>14:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>14:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>15:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>15:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>16:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>16:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>17:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>17:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>18:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>18:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>19:00</td>
        <td> </td>
    </tr>          
  </table> 

    </body>
</html>
  

javascript

<script>

$(document).ready(function()  {
            $('#datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
            dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
            dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
            monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
            monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
            nextText: 'Próximo',
            prevText: 'Anterior',
            inline: true,

             onSelect: function () {
                var date = $("#datepicker").val();

                $.ajax({
                     type: "POST", 
                     url: "retornar_data.php",
                     data: { date: date },
                     success: function(data) {
                          $.each($.parseJSON(data), function(chave,valor){

                              console.log(data);

</script>
  

return_data.php

<?php 


     $date = $_POST['date'];

    $conecta = mysqli_connect("localhost","root","","odonto");

    $selecao = "SELECT * from agenda WHERE dataAgenda = '{$date}' ";
    $categorias = mysqli_query($conecta,$selecao);

    $retorno = array();
    while($linha = mysqli_fetch_object($categorias)) {
        $retorno[] = $linha;
    }   

    echo json_encode($retorno);

    // fechar conecta
    mysqli_close($conecta);
?>
  

example of my json return

[{"agendaId":"2","dentistaId":"1","dataAgenda":"2015-12-02","horaAgenda":"08:30","descricaoAgenda":"Restauracao"},{"agendaId":"3","dentistaId":"2","dataAgenda":"2015-12-02","horaAgenda":"09:00","descricaoAgenda":"Protese"}]
    
asked by anonymous 12.12.2015 / 01:45

1 answer

0

         Schedule               

<script>

    $(document).ready(function () {
        $('#datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
            dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
            dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
            monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
            monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
            nextText: 'Próximo',
            prevText: 'Anterior',
            inline: true,

            onSelect: function () {
                var date = $("#datepicker").val();

                //$.ajax({
                //    type: "POST",
                //    url: "retornar_data.php",
                //    data: { date: date },
                //    success: function (data) {
                //        $.each($.parseJSON(data), function (chave, valor) {

                //            console.log(data);


                //        });
                //    }
                //})
                var data = [
                    { "agendaId": "2", "dentistaId": "1", "dataAgenda": "2015-12-02", "horaAgenda": "08:30", "descricaoAgenda": "Restauracao" },
                    { "agendaId": "3", "dentistaId": "2", "dataAgenda": "2015-12-02", "horaAgenda": "09:00", "descricaoAgenda": "Protese" }
                ];

                $.each(data, function(i, item) {
                    alert(item.descricaoAgenda);

                    $('#tableSchedule tr').each(function (x, el) {

                        var tr = $(el).find('td');

                        var hora = $(tr[0]).text();
                        var descricao = $(tr[1]).text();

                        if (hora.length == 4) hora = '0' + hora;

                        if (hora == item.horaAgenda)
                            $(tr[1]).html(item.descricaoAgenda);

                        //alert(hora + ' - ' + descricao);
                    })


                })




            }
        });
    });


</script>

<div id="datepicker"></div>
<br>
<div id="teste"></div>

<table id="tableSchedule" border="1">
    <tr>
        <td>08:00</td>
        <td></td>
    </tr>
    <tr>
        <td>8:30</td>
        <td></td>
    </tr>
    <tr>
        <td>9:00</td>
        <td></td>
    </tr>
    <tr>
        <td>9:30</td>
        <td></td>
    </tr>
    <tr>
        <td>10:00</td>
        <td></td>
    </tr>
    <tr>
        <td>10:30</td>
        <td></td>
    </tr>
    <tr>
        <td>11:00</td>
        <td></td>
    </tr>
    <tr>
        <td>11:30</td>
        <td></td>
    </tr>
    <tr>
        <td>12:00</td>
        <td></td>
    </tr>
    <tr>
        <td>12:30</td>
        <td></td>
    </tr>
    <tr>
        <td>13:00</td>
        <td></td>
    </tr>
    <tr>
        <td>13:30</td>
        <td></td>
    </tr>
    <tr>
        <td>14:00</td>
        <td></td>
    </tr>
    <tr>
        <td>14:30</td>
        <td></td>
    </tr>
    <tr>
        <td>15:00</td>
        <td></td>
    </tr>
    <tr>
        <td>15:30</td>
        <td></td>
    </tr>
    <tr>
        <td>16:00</td>
        <td></td>
    </tr>
    <tr>
        <td>16:30</td>
        <td></td>
    </tr>
    <tr>
        <td>17:00</td>
        <td></td>
    </tr>
    <tr>
        <td>17:30</td>
        <td></td>
    </tr>
    <tr>
        <td>18:00</td>
        <td></td>
    </tr>
    <tr>
        <td>18:30</td>
        <td></td>
    </tr>
    <tr>
        <td>19:00</td>
        <td></td>
    </tr>
</table>

    
15.12.2015 / 20:13