display array data in a modal with success function in ajax

Question

I have a function in a controller that will return an array that contains data from dataBase, that data will be sent to my success function as a json file , i want to display those informations in a div in my modal, and i can't do that so here is my controller function :

public function list_salle($id)
{

$data= $this->salle_model->get_all_salle($id);


     $this->output->set_output(json_encode($data));
          }

and here is my js function and its ajax :

function consulter_salle(id)
        { 

                           $.ajax({
                url : "<?php echo site_url('index.php/batiment/list_salle')?>/"+id,
                type: "POST",
                dataType: "JSON",
                success: function(data)
                { 

                   var table_header = "<table class='table table-striped table-bordered'><thead><tr><td>head_x</td><td>head_y</td></tr></thead><tbody>";
                   var table_footer = "</tbody></table>";
                var html ="";



                                for (row in data)       
                {
                    html += "<tr><td>"+data.id +"</td><td>"+data.libelle+"</td></tr>";
            }

                var all = table_header +html+ table_footer;



        // show bootstrap modal when complete loaded
                $('.modal-title').text('Test');
                $('#salle_list').html(all);
                            $('#modal_list').modal('show');

                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error displaying data');
                }
            });

        }

and here is my modal :

 <div class="modal fade" id="modal_list" role="dialog">
      <div class="modal-dialog">
        <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>
            <h3 class="modal-title">Liste des salles</h3>
          </div>
          <div class="modal-body form">
            <form action="#" id="form" class="form-horizontal">

              <div class="form-body">
          <div id="salle_list"></div>


              </div>
              </form>
              <div class="modal-footer">
                <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div>
    </div>

So the data is sent correctly as a json file but i can't display it and i think the problem in the loop and the .html function , please help thank you !

how `data` looks like? could you post the sample? – Oleksandr T. Apr 03 '17 at 13:31 — Oleksandr T., Apr 03 '17 at 13:31
[{"id":"1","libelle":"45","id_bat":"1"}] – Apr 03 '17 at 13:36 — , Apr 03 '17 at 13:36

score 0 · Answer 1 · edited May 23 '17 at 12:02

Your for loop in the ajax looks like it should be a foreach, but even then it's wrong. You're iterating over a json object, look at this question if you want some alternatives on how to do that: How do I iterate over a JSON structure?. One answer there gives a loop like this:

$(jQuery.parseJSON(JSON.stringify(data))).each(function() {  
    html += "<tr><td>"+this.id +"</td><td>"+this.libelle+"</td></tr>";
}

score 0 · Accepted Answer · answered Apr 04 '17 at 10:50

I found a solution :

  success: function(data)
                {  



                   var table_header = "<table class='table table-striped table-bordered'><thead><tr><td>Identifiant</td><td>Libelle</td></tr></thead><tbody>";
                   var table_footer = "</tbody></table>";
                var html ="";

               data.forEach(function(element) {
              html += "<tr><td>"+element.id +"</td><td>"+element.libelle+"</td></tr>";
            });



                var all = table_header +html+ table_footer;

                $('.modal-title').text('Liste des salles');

                $('#salle_list').html(all);
                            $('#modal_list').modal('show');

                }

display array data in a modal with success function in ajax

2 Answers2