CODEWITHSUNDEEP
javascriptajaxcodeigniter-3
irwan dwiyanto
irwan dwiyanto

Reputation: 690

Display data with ajax json on CodeIgniter

I'm want to display the data with ajax, after I make the data did not show up but when I call controllers with displays json data exist, how do I display the data name, address and telp based id_data?

Views

<input id="id_data" value="5" />

<input id="name">
<input id="address">
<input id="telp">

<script type="text/javascript">
$(document).ready(function() {
    var id = $('#id_data').val();
    $.ajax({
        url : "<?php echo site_url('my_controllers/show_data/')?>" + id,
        type: "GET",
        dataType: "JSON",
        success: function(data)
        {
            $('#name').text(data.name);
            $('#address').text(data.address);
            $('#telp').text(data.telp);
        }
    });     
})
</script>

Controllers

function show_data($id) {   
    $data = $this->my_models->get_data($id);
    echo json_encode($data);
}

Models

function get_data($id) {
    $query = $this->db->select('*')
                      ->from('tb_student')
                      ->where('id', $id)
                      ->get();

    if ($query->num_rows() > 0) {
        foreach ($query->result() as $data) {
            $hasil[] = $data;
        }
        return $hasil;
    } 

}

Result JSON

[
    {"id":"5","name":"John","address":"Miami","telp":"012345678"},
    {"id":"5","name":"Smith","address":"Chichago","telp":"012345678"},
    {"id":"5","name":"Steve","address":"Texas","telp":"012345678"},
]

Upvotes: 0

Views: 8314

Answers (1)

paulgv
paulgv

Reputation: 1828

It looks like you're appending each dataset to an $hasil array which is then JSON encoded and returned to the view where you should either loop through the array, or access its first key if it exists.

This script might work for showing the first dataset from the response :

$(document).ready(function() {
  var id = $('#id_data').val();
  $.ajax({
    url: "<?php echo site_url('my_controllers/show_data/')?>" + id,
    type: "GET",
    dataType: "JSON",
    success: function(data) {
      if (data[0] === undefined) return;
      $('#name').text(data[0].name);
      $('#address').text(data[0].address);
      $('#telp').text(data[0].telp);
    }
  });
})

If you want to show all elements, one way to do it would be to create some DOM in the loop. Here's an example using data from a variable :

var json = [{
  "id": "5",
  "name": "John",
  "address": "Miami",
  "telp": "012345678"
}, {
  "id": "5",
  "name": "Smith",
  "address": "Chichago",
  "telp": "012345678"
}, {
  "id": "5",
  "name": "Steve",
  "address": "Texas",
  "telp": "012345678"
}];

function show(data, $view) {
  // Loop through passed data
  data.forEach(function(current, index, array) {
    // Create a wrapper for current dataset if needed
    // Using a <form> here that you could use to edit
    // the data later on
    var $form = $('<form />');

    // Create the inputs and prefill them with the data
    // fetched from the server
    var $input_id = $('<input />')
      .attr('name', 'id')
      .attr('type', 'hidden')
      .val(current.id);
    var $input_name = $('<input />')
      .attr('name', 'name')
      .attr('type', 'text')
      .val(current.name);
    var $input_address = $('<input />')
      .attr('name', 'address')
      .attr('type', 'text')
      .val(current.address);
    var $input_telp = $('<input />')
      .attr('name', 'telp')
      .attr('type', 'text')
      .val(current.telp);

    // Add the DOM to the page
    $form.append($input_id, $input_name, $input_address, $input_telp)
    $view.append($form);
  });
}

$(function() {
  show(json, $('#view'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="view"></div>

You would have to adapt the code to your Ajax callback, or you could even add the show() function to your script and call it from the success callback :

$(document).ready(function() {
  var id = $('#id_data').val();
  $.ajax({
    url: "<?php echo site_url('my_controllers/show_data/')?>" + id,
    type: "GET",
    dataType: "JSON",
    success: function(data) {
      show(data, $(document))
    }
  });
})

Upvotes: 1

Related Questions