title: JSON not working with CodeIgniter and AJAX
body: <p>Good day to all.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/eUcKO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eUcKO.png" alt="enter image description here"></a></p>
  
  <p>So here is my code:</p>
  
  <p><strong>VIEW:</strong></p>
  
  <pre><code>&lt;div class="panel-body"&gt;
      &lt;div class="col-sm-3 col-md-3 pull-right"&gt;
          &lt;form class="navbar-form" role="search"&gt;
              &lt;div class="input-group"&gt;
                  &lt;input type="text" class="form-control" placeholder="Search" name="search_empname" id="search_empname" autocomplete="off"&gt;                                  
  
                  &lt;div class="input-group-btn"&gt;
                      &lt;button class="btn btn-default" type="button" id="btnsearch"&gt;
                      &lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/button&gt;                                     
                  &lt;/div&gt;                                  
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div class="table-responsive"&gt;
          &lt;table class="table table-striped table-bordered table-hover" id="employee_access_dataTables"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th width="10%"&gt;Employee No.&lt;/th&gt;
                      &lt;th width="10%"&gt;Username&lt;/th&gt;
                      &lt;th width="10%"&gt;FirstName&lt;/th&gt;
                      &lt;th width="10%"&gt;MiddleName&lt;/th&gt;
                      &lt;th width="10%"&gt;LastName&lt;/th&gt;                                       
                      &lt;th width="10%"&gt;Prim. Role&lt;/th&gt;
                      &lt;th width="10%"&gt;Sec. Role&lt;/th&gt;
                      &lt;th width="10%"&gt;Email&lt;/th&gt;
                      &lt;th width="10%"&gt;Status&lt;/th&gt;
                      &lt;th&gt;Action&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;                         
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CONTROLLER</strong></p>
  
  <pre><code>public function search_employee() {
      $search_empname = trim($this -&gt; security -&gt; xss_clean($this -&gt; input -&gt; get('lastname')));
      $data['empresult'] = $this -&gt; msystems_admin -&gt; search_employee($search_empname);
      echo json_encode($data);
  }
  </code></pre>
  
  <p><strong>AJAX</strong></p>
  
  <pre><code>$('#btnsearch').click(function(){
      var gv_lname = $('#search_empname').val();
  
      if(gv_lname != ''){
          $.ajax({
              type:'GET',
              cache: false,
              datatype: 'json',
              url:'&lt;?php echo site_url('csystems/search_employee');?&gt;',
              data:'lastname='+gv_lname,
              success: function(data){
                  console.log(data);  
                  //I am not sure what to place here          
              }   
          });
      }               
  });
  </code></pre>
  
  <p>Can you please emligthen me how to derive the output I desired? Thank you so much in advance.</p>
  
  <p>NOTE: I cannot display the output of JSON even I do an ALERT. :(</p>
  
  <p>UPDATE:
  Here's is the Network Tab of the Developer Tool of Chrome. 
  <a href="https://i.stack.imgur.com/SQsk9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SQsk9.png" alt="enter image description here"></a></p>
  
  <p>And when I click the URL search_employee, I got nothing preview.
  <a href="https://i.stack.imgur.com/p2SDQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p2SDQ.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/3Lyi0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Lyi0.png" alt="enter image description here"></a></p>
  
  <p><strong>UPDATE 2:</strong>
  If I changed my CONTROLLER something like this where I will not pass it like JSON.</p>
  
  <pre><code>public function search_employee() {
      $search_empname     = trim($this -&gt; security -&gt; xss_clean($this -&gt; input -&gt; get('lastname')));
      $data['empresult']  = $this -&gt; msystems_admin -&gt; search_employee($search_empname);
      //echo json_encode($data);
  
      foreach ($data['empresult'] as $row){
          $output  = $row -&gt; fname;
          $output .= $row -&gt; mname;
          $output .= $row -&gt; lname;
      }
  
      echo $output;       
  </code></pre>
  
  <p>}</p>
  
  <p>And in my AJAX, I remove the JSON as datatype such as this one below,</p>
  
  <pre><code>$('#btnsearch').click(function(){
      var gv_lname = $('#search_empname').val();
  
      if(gv_lname != ''){
          $.ajax({
              type:'GET',
              cache: false,
              //dataType: 'json',
              url:'&lt;?php echo site_url('csystems/search_employee');?&gt;',
              data:'lastname='+gv_lname,
              success: function(data){
                  console.log(data);  
                  //I am not sure what to place here                          
              }   
          });
      }               
  </code></pre>
  
  <p>});</p>
  
  <p>Then I got a response as seen from the console logs. Please see the screenshot.
  <a href="https://i.stack.imgur.com/Nyozi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nyozi.png" alt="enter image description here"></a></p>
  
  <p>I am not sure what's wrong with JSON... :(</p>