AJAX在CodeIgniter中选择过滤

Question

I try to filter data in my view using select box. I'm using CodeIgniter and I want to filter it using AJAX. I already test the code and look at the console, and AJAX post returns a result. The problem is, I don't know how to display the result in my view. I mean, how am I suppose to write in success: function(){}?

This is my AJAX code:

$(document).ready(function() {
    $("#selectBerdasar").change(function() {
        var key = $(this).val();
        console.log(key);
        var postdata = {key: key};
        var url = '<?php echo site_url('produk/filter/GetFilterJson');?>';
        $.post(url, postdata, function(result) {
            console.log(result);
            if (result) {
                var obj = JSON.parse(result);
                $('col-item').empty();
                $.each(obj, function(key, line) {

                });
            } else {

            }
        });
    });
});

This is my view:

<div class="row">
    <div class="col-md-4 pull-right">
        <select class="form-control" id="selectBerdasar">
            <!--  <option>Produk Terbaru</option>
            <option>Produk Terpopuler</option> -->
            <option value="termahal">Harga Termahal</option>
            <option value="termurah">Harga Termurah</option>
            <option value="alfabet">Alfabet A-Z</option>
        </select>
    </div>
</div>
<div class="row">
    <?php foreach ($produk as $data) {?>
        <div class="col-xs-6 col-sm-4 col-md-4">
            <div class="col-item">
                <a href="<?php echo base_url('produk/item/detail/' . $data['id_produk']);?>">
                    <div class="photo">
                        <img src="<?php echo base_url();?>asset/user/img/produk/<?php echo $data['gambar'];?>" class="img-responsive" alt="" />
                    </div>
                    <div class="info">
                        <div class="row">
                            <div class="price col-md-12">
                                <h5><?php echo $data['nama_produk'];?></h5>
                                <h5 class="price-text-color">Rp.<?=number_format($data['harga_produk'], 0, ',', '.')?></h5>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>
    <?php } ?>
</div>

I just don't know how to display the result in my view.

Answer 1

First of all you to should to numerate your items like this:

<?php foreach ($produk as $KEY => $data) ?>
   <div class="col-xs-6 col-sm-4 col-md-4">
      <div id="id-<?= $KEY ?>" class="col-item">

where $KEY is your id of data's element (you may use $data['key'] variant

Then use something like:

// ... 
var someHtml = ''; 
obj.forEach(function(elem, index) { 
   // remember to convert data type to string
   someHtml = '<p>'+elem.some_data_to_display + '</p>'; 
   $('#id-'+elem.key).html(someHtml); 
});

// ...