Why json data is showing in header in codeigniter HMVC - AJAX

Question

I'm new in ajax and I don't know how to get over this error. I don't understand this error. Please help.

Here is my Modal User_m.

I fetch data from database successfully

    <?php
  class Users_m extends CI_Model
  {
    public function showAllAdmins()
    {
      $query  = $this->db->get('admin_users');
      if($query->num_rows() > 0){
          return $query->result();
      }else{
          return false;
      }
    }
  }
?>

Here is my Controller AdminUsers

I get all data from database through my modal and encode it using by json_encode but I don't know why this json data is showing on my page header.In this Image

  class AdminUsers extends MY_Controller
  {
    public function __construct()
    {
      parent::__construct();
      $this->load->model('AdminUsers/Users_m');
    }

    public function index()
    {
      $data['content_view'] = 'AdminUsers/viw_users';
      $data['page_title']   = 'Users';
      $data['page_descr']   = 'all admin users';
      $result  = $this->Users_m->showAllAdmins();

      echo json_encode($result);
      $this->template->admin_template($data);
    }
}

And this is my ajax code

When I Every time refresh my page it execute alert Could not get data from database. I don't know How to pass Json data in ajax. I see console log but not show any error. I load jQuery also. Any help will be appreciated. Thanks for your answers. And when I loop through this it goes to infinity.

 $(function(){
      showAllAdmins();

        function showAllAdmins(){
          $.ajax({
              type:'ajax',
              url: 'http://localhost/hmvcExample/AdminUsers',
              async:false,
              success: function(data){
                var html  = '';
                var i = 0;
                for(i=0; i<data.length; i++){
                    html +='<tr>'+
                              '<td>Rakesh</td>'+
                              '<td>Kumar</td>'+
                              '<td>Rakeshkrishan1992@gmail.com</td>'+
                              '<td>Rocky</td>'+
                              '<td><a href="#"><button class="btn btn-primary">Edit</button></a> <a href="#"><button class="btn btn-danger">Delete</button></a></td>'+
                            '</tr>';
                }
                $('#showData').html(html);
              },
              error: function(){
                alert('Could not load Data from Database');
              }

          });
        }
    });

View file

<div class="box">
  <div class="box-header">
    <h3 class="box-title">Users List</h3>
    <button class="btn btn-success pull-right">Add New</button>
  </div>
  <!-- /.box-header -->
  <div class="box-body">
    <table id="example2" class="table table-bordered table-hover table-responsive">
      <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email Address</th>
        <th>User Name</th>
        <th>Action</th>
      </tr>
      </thead>
      <tbody id="showData">

      </tbody>
    </table>
  </div>
  <!-- /.box-body -->
</div>

Answer 1

I'm posting a sample code. Please refer.

<table id="example1" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>Slno</th>
                        <th>Name</th>
                        <th>Username</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody id="user_table">
                        <?php if($result) { $i =1; foreach ($result as $row){ ?>
                        <tr>
                            <td><?php echo $i; ?></td>
                            <td><?php echo $row->fullname; ?></td>
                            <td><?php echo $row->username; ?></td>
                            <td><?php echo $row->email; ?></td>
                            <td><?php if($row->active == "1"){ ?>
                                <span class="label label-success"><?php echo 'Active'; ?></span>  
                            <?php }elseif($row->active == "0"){ ?>
                                <span class="label label-warning"><?php echo 'Inactive'; ?></span>
                            <?php } ?></td>
                            <td>
                                <div class="btn-group">
                                    <a class="btn btn-xs btn-success" href="<?php echo base_url().'admin/user/view_user?id='.$row->user_id.'&action=edit'; ?>" title="View">
                                      <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <?php  $i++; } } ?>
                    </tbody>
                  </table>

You have to pass the data from the controller as follows

$data['result'] = $result; //your sql query resultset
$this->template->admin_template($data);

No need to use ajax at all. Hope this can help you. Feel free to ask if you have any queries.