JSON not working with CodeIgniter and AJAX

Question

Good day to all.

Im sorry if I asked this question which stopped me now on my development. I am just a newbie in jquery and json which dont know yet how to manipulate the data. Sorry for this.

As a background, here is my VIEW as I am using a CodeIgniter Framework. This Search button (in yellow) is not the default "Search" of the Boostrap Datatable. Since, as my design, I will search first the last name of the employee then hit the search button. If there are records to be retrieved, then I will add/display it in the datatable.

So here is my code:

VIEW:

<div class="panel-body">
    <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search" name="search_empname" id="search_empname" autocomplete="off">                                  

                <div class="input-group-btn">
                    <button class="btn btn-default" type="button" id="btnsearch">
                    <i class="glyphicon glyphicon-search"></i></button>                                     
                </div>                                  
            </div>
        </form>
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover" id="employee_access_dataTables">
            <thead>
                <tr>
                    <th width="10%">Employee No.</th>
                    <th width="10%">Username</th>
                    <th width="10%">FirstName</th>
                    <th width="10%">MiddleName</th>
                    <th width="10%">LastName</th>                                       
                    <th width="10%">Prim. Role</th>
                    <th width="10%">Sec. Role</th>
                    <th width="10%">Email</th>
                    <th width="10%">Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>                         
            </tbody>
        </table>
    </div>

CONTROLLER

public function search_employee() {
    $search_empname = trim($this -> security -> xss_clean($this -> input -> get('lastname')));
    $data['empresult'] = $this -> msystems_admin -> search_employee($search_empname);
    echo json_encode($data);
}

AJAX

$('#btnsearch').click(function(){
    var gv_lname = $('#search_empname').val();

    if(gv_lname != ''){
        $.ajax({
            type:'GET',
            cache: false,
            datatype: 'json',
            url:'<?php echo site_url('csystems/search_employee');?>',
            data:'lastname='+gv_lname,
            success: function(data){
                console.log(data);  
                //I am not sure what to place here          
            }   
        });
    }               
});

Can you please emligthen me how to derive the output I desired? Thank you so much in advance.

NOTE: I cannot display the output of JSON even I do an ALERT. :(

UPDATE: Here's is the Network Tab of the Developer Tool of Chrome.

And when I click the URL search_employee, I got nothing preview.

UPDATE 2: If I changed my CONTROLLER something like this where I will not pass it like JSON.

public function search_employee() {
    $search_empname     = trim($this -> security -> xss_clean($this -> input -> get('lastname')));
    $data['empresult']  = $this -> msystems_admin -> search_employee($search_empname);
    //echo json_encode($data);

    foreach ($data['empresult'] as $row){
        $output  = $row -> fname;
        $output .= $row -> mname;
        $output .= $row -> lname;
    }

    echo $output;       

}

And in my AJAX, I remove the JSON as datatype such as this one below,

$('#btnsearch').click(function(){
    var gv_lname = $('#search_empname').val();

    if(gv_lname != ''){
        $.ajax({
            type:'GET',
            cache: false,
            //dataType: 'json',
            url:'<?php echo site_url('csystems/search_employee');?>',
            data:'lastname='+gv_lname,
            success: function(data){
                console.log(data);  
                //I am not sure what to place here                          
            }   
        });
    }               

});

Then I got a response as seen from the console logs. Please see the screenshot.

I am not sure what's wrong with JSON... :(

Answer 1

use

dataType: 'json',   instead of datatype: 'json',

T should be capital. Hope it works