Question

I have been working on a CodeIgniter project and hav run into an issue with using ajax to return the data from my controller.

Controller:

function outputAjax()
    {
        $this->load->model('my_model');
        $data['results'] = $this->site_model->getInfo();
        $this->output->set_output(json_encode($data));
    }

Model:

function getInfo()
{
    $this->db->order_by('PubDate','DESC');
    $query = $this->db->get('Articles', 50);

        return $query->result();
}

Ajax function in View:

<div id="article-area">
    <p>Hey this is where the ajax call should output!</p>

</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" language="Javascript">
 jQuery(document).ready(function(){     
      $.ajax({
url: 'http://localhost/project/index.php/my_controller/outputAjax',
dataType:'json',
success: function(data) {
    $.each(data, function(index,item){
        $("#article-area").append('<div><b>' + item.id + '</b></div><hr />');

    });
}
      });

});

I can output the data fine using PHP foreach loop but now I am trying to convert that into using ajax. If I am correct, the data being output is an array of objects.
Each ‘object’ contains 6 or so fields of data such as: id, title, url, PubDate, Source.

I am fairly new to using ajax for anything but in my attempt to debug the issue, using Chrome inspect and checking ‘Network’ I can see the ajax call and in the response tab: all of the data I need is shown here in this way:

{"results":[{"id":"1","Source":"My Source","Title":"My Title". . . .

Since the data is shown in the response but either nothing shows up on the page or if I change the ajax call I can get it to output UNDEFINED.

The final result I am looking to achieve is about 10 or so divs on the page with data from the ajax call. Which brings up my side question as well…

My model returns 50 rows of data from the db. I am currently passing all of it to the ajax function in json format. I will only be using 10 rows of that data initially and then use the rest of the rows over a determined amount of time on that page. Is it best to continue to output all 50 rows to the ajax call initially and then use it as needed, or limit the data to only what will be used initially from the model?

I have ran through a few ajax tutorials with CI but, all of them are using a POST and I have yet to find one that is running on document.ready and without user interaction. I also noticed there must be a few various ways to output the data. I have seen the use of .append() .after() and .value() used in this way, none seemed to work for my particular case though…

Thanks for the help!

Answer 1

If your data was simply an array, your code would work. However your data array is contained in an results which is property of an object.

Change each to:

$.each(data.results, function(index,item){...

Or simply send the array without putting it into the php results array

$data = $this->site_model->getInfo();