I am using a lot of jQuery in a project am working on.

I have a javascript function that makes an ajax request to a controller which returns data in JSON.

I would like to display a user friendly message informing the user that he/she has no information stored yet. But I'm confused as to how to send a response in JSON so my javascript function can determine whether the user has information to be displayed.

Here is my javascript function:

function latest_pheeds() {
    var action = url+"pheeds/latest_pheeds";
    $('#pheed-stream').html('<div class="loading"></div>');
    $('.loading').append('<img src="'+pheed_loader_src+'" />');
    $.ajax({
        url:action,
        type:'GET',
        dataType:'json',
        error: function () {
        },
        success:function(data) {
            $('.loading').fadeOut('slow');
            $.each(data,function(index,item) {
            $('#pheed-stream').append
            (
            '<div class="pheed" id="'+item.pheed_id+'">'+
            '<p><a class="user_trigger" href="users/info/'+item.user_id+'">'
            +item.user_id+'</a></p>'+
            '<p>'+item.pheed+'</p>'+
            '<div class="pheed_meta">'+
            '<span>'+item.datetime+' Ago</span>'+
            '<span class="cm">'+itemments+
            '<img class="comment_trigger" src="/pheedbak/assets/img/comment.png" title="Click to comment on pheed" onclick="retrieve_comments('+item.pheed_id+')">'+
            '</span>'+
            '<span>'+item.repheeds+
            ' Repheeds'+
            '<img class="repheed_trigger" src="/pheedbak/assets/img/communication.png" title="Click to repheed" onclick="repheed('+item.pheed_id+')">'+
            '</span>'+
            '<span>'+
            'Favourite'+
            '<img class="favourite_trigger" src="/pheedbak/assets/img/star.png" title="Click to make this a favourite" onclick="favourite_pheed('+item.pheed_id+')" />'+
            '</span>'+
            '</div>'+
            '</div>'
            );
        });
        }
    });
}

And heres the controller function the ajax request is made to

function latest_pheeds() {
    //Confirm if a user is logged before allowing access
    if($this->isLogged() == true) {
        //load the pheed model for database interaction
        $this->load->model('pheed_model');
        //load user model
        $this->load->model('user_model');
        //load comment model
        $this->load->model('comment_model');
        //store the pheeds to a the $data variable
        $data = $this->pheed_model->get_latest_pheeds();
        //Load the date helper to calculate time difference between post time and current time
        $this->load->helper('date');
        //Current time(unix timetamp)
        $time = time();
        //pheeds
        $pheeds = array();
        if(count($data) > 0 ) {
            foreach($data as $pheed) {
                $row['pheed_id'] = $pheed->pheed_id;
                $row['user_id'] = $this->user_model->return_username($pheed->user_id);
                $row['pheed'] = $pheed->pheed;
                $row['datetime'] = timespan($pheed->datetime,$time);
                $row['comments'] = $this->comment_model->count_comments($pheed->pheed_id);
                $row['repheeds'] = $pheed->repheeds;
                $pheeds[] = $row;
            }

            echo json_encode($pheeds);
            $response['response'] = "Ok";
            $res[] = $response;
            echo json_encode($res)."\n";
        }
    } else {

    }

It generates the JSON output,but the syntax is broken so i cant read it with javascript, but once i get rid of the following code from the above method it works normally

  $response['response'] = "Ok";
  $res[] = $response;
  echo json_encode($res)."\n";

I am using a lot of jQuery in a project am working on.

I have a javascript function that makes an ajax request to a controller which returns data in JSON.

I would like to display a user friendly message informing the user that he/she has no information stored yet. But I'm confused as to how to send a response in JSON so my javascript function can determine whether the user has information to be displayed.

Here is my javascript function:

function latest_pheeds() {
    var action = url+"pheeds/latest_pheeds";
    $('#pheed-stream').html('<div class="loading"></div>');
    $('.loading').append('<img src="'+pheed_loader_src+'" />');
    $.ajax({
        url:action,
        type:'GET',
        dataType:'json',
        error: function () {
        },
        success:function(data) {
            $('.loading').fadeOut('slow');
            $.each(data,function(index,item) {
            $('#pheed-stream').append
            (
            '<div class="pheed" id="'+item.pheed_id+'">'+
            '<p><a class="user_trigger" href="users/info/'+item.user_id+'">'
            +item.user_id+'</a></p>'+
            '<p>'+item.pheed+'</p>'+
            '<div class="pheed_meta">'+
            '<span>'+item.datetime+' Ago</span>'+
            '<span class="cm">'+item.comments+
            '<img class="comment_trigger" src="/pheedbak/assets/img/comment.png" title="Click to comment on pheed" onclick="retrieve_comments('+item.pheed_id+')">'+
            '</span>'+
            '<span>'+item.repheeds+
            ' Repheeds'+
            '<img class="repheed_trigger" src="/pheedbak/assets/img/communication.png" title="Click to repheed" onclick="repheed('+item.pheed_id+')">'+
            '</span>'+
            '<span>'+
            'Favourite'+
            '<img class="favourite_trigger" src="/pheedbak/assets/img/star.png" title="Click to make this a favourite" onclick="favourite_pheed('+item.pheed_id+')" />'+
            '</span>'+
            '</div>'+
            '</div>'
            );
        });
        }
    });
}

And heres the controller function the ajax request is made to

function latest_pheeds() {
    //Confirm if a user is logged before allowing access
    if($this->isLogged() == true) {
        //load the pheed model for database interaction
        $this->load->model('pheed_model');
        //load user model
        $this->load->model('user_model');
        //load comment model
        $this->load->model('comment_model');
        //store the pheeds to a the $data variable
        $data = $this->pheed_model->get_latest_pheeds();
        //Load the date helper to calculate time difference between post time and current time
        $this->load->helper('date');
        //Current time(unix timetamp)
        $time = time();
        //pheeds
        $pheeds = array();
        if(count($data) > 0 ) {
            foreach($data as $pheed) {
                $row['pheed_id'] = $pheed->pheed_id;
                $row['user_id'] = $this->user_model->return_username($pheed->user_id);
                $row['pheed'] = $pheed->pheed;
                $row['datetime'] = timespan($pheed->datetime,$time);
                $row['comments'] = $this->comment_model->count_comments($pheed->pheed_id);
                $row['repheeds'] = $pheed->repheeds;
                $pheeds[] = $row;
            }

            echo json_encode($pheeds);
            $response['response'] = "Ok";
            $res[] = $response;
            echo json_encode($res)."\n";
        }
    } else {

    }

It generates the JSON output,but the syntax is broken so i cant read it with javascript, but once i get rid of the following code from the above method it works normally

  $response['response'] = "Ok";
  $res[] = $response;
  echo json_encode($res)."\n";

• php
• javascript
• jquery
• json

• can i send only the json data in HTTP header instead of the webpage ? – Rajan Commented Jan 23, 2016 at 6:34

1 Answer 1

You MUST only use json_encode($data) once in a response, if you want to output more stuff, you need to merge your data into one array and send that.

EDIT: To be clear, one way you could do it is like this:

echo json_encode(array('pheeds' => $pheeds, 'res' => $res));

Then in JS you will get an array with the keys "pheeds" and "res".

Although it may be of little practical significance, I would also recommend doing this before you echo the json encoded string:

header('Content-Type: application/json');