为什么jquery中的$ .each无法读取jquery中的'data'？

I have this listener who listens in this php function

public function notification_query(){

$this->sse();
$data['company_id'] = $this->session->userdata('companyId');
$data['chikito']=$this->pm_model->notifications_admin($data);

echo "data: ".json_encode($data['chikito'])."

";
ob_flush();
flush();
sleep(1); }

and if the server has an event, it will pass automatically to the client side script function.

var es = new EventSource("<?php echo base_url(); ?>admin/notification_query");

 var listener = function (data)
 {
    var data = data.data;
    //$("#notification").append(data);   
      $.each(data, function(index, val) {  
        $("#notification").append(val.details); 
       });

 }

  es.addEventListener("message", listener);

now the problem is, why can't the $.each in jquery can't read the data pass from the server? It didn't print. I have no idea why.

By the way, if I use $("#notification").append(data); It will print the data that is pass.

thanks in advance for those who answers.

The JSON.stringify() method converts a value to JSON.

var data = JSON.stringify(data).data;

JSON.stringify({});                  // '{}'
JSON.stringify(true);                // 'true'
JSON.stringify("foo");               // '"foo"'
JSON.stringify([1, "false", false]); // '[1,"false",false]'
JSON.stringify({ x: 5 });            // '{"x":5}'
JSON.stringify({x: 5, y: 6});        // '{"x":5,"y":6}' or '{"y":6,"x":5}'