PHPからのJSのコールバックデータとして配列を送信

Question

私は最後の5日間の出席データをデータベースから取得するためのダッシュボードページを持っています。そのためには、スクリプトのimから別の.jsファイルで定義した関数を呼び出します。 PHP関数を使用して、私はコールバックデータとしてJavascript関数にデータを送り返します。私はJavascriptで、私はこの配列データを処理する方法を知らない。実際に私は文字列でうまく動作する1つのサンプルアプリケーションからこのアイデアを得ましたが、配列をコード化できませんでした。 index.phpページ

 <div class="inner">        
      <table class="table table-borderless table-condensed "> 
      <thead><tr><th>Date</th><th>Total</th></tr></thead> 
      <tbody id ="attendancelist">      
      </tbody> 
      </table> 
     </div> 
    <script> 
    modJs.getlastfiveattendance(); 
    </script> 

JSファイル：PHPファイルで

Display.method('getlastfiveattendance', function() { 
    var that = this; 
    var object = {"emp_id":empId}; 
    var reqJson = JSON.stringify(object); 
    var callBackData = []; 
    callBackData['callBackData'] = []; 
    callBackData['callBackSuccess'] = 'getlastPunchSuccessCallBack'; 
    callBackData['callBackFail'] = 'getlastPunchFailCallBack'; 
    this.customAction('getLastfive','modules=attendance',reqJson,callBackData); 
}); 

Display.method('getlastPunchSuccessCallBack', function(callBackData) { 
    var punches = callBackData; 
    $('#attendancelist').html(''); 
    var row = '<tr><td>_date_</td><td>_total_</td></tr>'; 

    $.each(punches, function(key, value) { //here i have to process this array to get each data 
    var trow = row;  
     trow = trow.replace(/_date_/g,Date.parse(key).toString('MMM d, yyyy (dddd)')); 
     trow = trow.replace(/_total_/g,value); 
     html += trow; 
    }); 
    $('#attendancelist').html(html);   

});  
Display.method('getlastPunchFailCallBack', function(callBackData) {  
    this.showMessage("error","Failed to Retrieve data");   
}); 

、イムデータを取得し、ちょうど私は、その特定の日の日付と合計時間を必要とし、配列として渡します。

public function getLastfive($req){   
     empid = $req->emp_id;   
     $attendance = new Attendance(); 
     $attendanceList = $attendance->Find("employee = ? ORDER BY id DESC LIMIT 5",array(empid));   
     $dayMap = array();   
     foreach($attendanceList as $attendance){ 
      $dayMap[$attendance->in_time] = $attendance->note; //emp in_time as key and the total time as value 
     } 
     return new simRes(simRes::SUCCESS,$dayMap);   
    } 

しかし、ここでコントロールは$ .eachループに入りません。私は次のコードを使用して、パンチが配列かどうかを確認する次のコードでチェックします。 ITは配列ではないことを示します。

if(Object.prototype.toString.call(punches) === '[object Array]') { 
    this.showMessage("yes","It's array"); 
    } 
    else 
     this.showMessage("No","Its no array"); 

インサイドsimResクラス：あなたのPHPの一部で

：

class SimRes{ 
    const SUCCESS = "SUCCESS"; 
    const ERROR = "ERROR"; 
    var $status; 
    var $data; 
    public function __construct($status,$data = null){ 
     $this->status = $status;  
     $this->data = $data;  
    } 
    public function getStatus(){ 
     return $this->status; 
    } 
    public function getData(){ 
     return $this->data; 
    } 
    public function getJsonArray(){ 
     return array("status"=>$this->status,"data"=>$this->data); 
    } 
} 

Answer 1

これを試してみてくださいあなたのHTMLで

public function getLastfive($req){   
    $attendance = new Attendance(); 
    $attendanceList = $attendance->Find("employee = ? ORDERBY id DESC LIMIT 5)",array((int)$req->emp_id));  
    $dayMap = array(); 
    // generating array of attendances with key value 
    foreach($attendanceList as $attendance){ 
     $dayMap[] = [ 
      'date' => $attendance->in_time, 
      'total' => $attendance->note 
     ]; 
    } 

    return new simRes(simRes::SUCCESS, json_encode($dayMap)); // I don't know if it's already json-ifies result, but if Yes, so remove json_encode 
} 

を（lodash libが含まれ、それはJSでの作業簡素化）：

とあなたのJSコードで：

Display.method('getlastPunchSuccessCallBack', function(callBackData) { 
    $('#attendancelist').html(''); // making empty before processing data 

    // if response is string, it happens when You don't send application/json content type on response headers 
    if(_.isString(callBackData)) { 
     callBackData = JSON.parse(callBackData); // parse string make it json 
    } 
    if(!_.isArray(callBackData)) { // if it's not array of objects, so stop here 
     return; 
    } 

    var punches = callBackData; 

    var html = ''; // create empty var to generate html 
    _.each(punches, function(punch) { 
     // iterate array of punches and pass punch to iterator function 
     // punch is object like {date: "some date", total: "some value"} 

     html+='<tr>'; 
     html+='<td>'+Date.parse(punch.date).toString('MMM d, yyyy (dddd)')+'</td>'; 
     html+='<td>'+punch.total+'</td>'; 
     html+='</tr>'; 
    }); 

    $('#attendancelist').html(html); 
});