Display data with ajax json on CodeIgniter

Question

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"},
]

paulgv · Accepted Answer · 2016-12-11 02:15:19Z

1

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))
    }
  });
})

edited Dec 11, 2016 at 2:15

answered Dec 11, 2016 at 0:41

paulgv

1,82817 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

irwan dwiyanto Over a year ago

thanks it can display the data on views, but it turns out that my data array, how do I add foreach?

paulgv Over a year ago

Could put a sample JSON response from the Controller, it would give a better idea of the data structure you're trying to display

irwan dwiyanto Over a year ago

I have json show results on my question. so I want to show all the names, addrees and phone based id_data

irwan dwiyanto Over a year ago

Thanks @paulgv, it's very helps

Collectives™ on Stack Overflow

Display data with ajax json on CodeIgniter

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related