php Laravel Ajaxは、ビュー

Question

に のように複数のオブジェクトデータを読み込むことができませんでした。学生のユーザー名を選択できる学生データを表示し、学生の関連データをビューページに読み込みます。 問題は生徒データが読み込まれても最後の配列のデータだけを表示していることです。 例学生は2つの学年を持っています。その生徒は最後のコースだけを選択し、他の人とは関係のないデータを表示しました。

コンソールでチェックしている間に、すべての結果が表示されますが、表示ページには表示されません。

どのように問題を解決できますか？ここで

は、ルートである：ここでは

Route::get('/viewResultPage',[ 
    'uses'=>'ResultController@viewResultPage', 
    'as'=>'viewResultPage' 
    ]); 

はコントローラです：

public function ajax_student_result(Request $request) 
    { 
      $std_id= $request->input(['std_id']); 
     $student = DB::table('results')->join('grades','results.grade_id', '=','grades.id') 
      ->join('courses', 'results.course_id', '=', 'courses.id') 
      ->join('students', 'results.student_id', '=', 'students.id') 
      ->join('departments','students.department_id','=','departments.id') 
      ->where('students.id', $std_id)      
      ->selectRaw('students.name,students.email,departments.name as d_name, 
      courses.name as c_name,courses.code as c_code,grades.grade') 
      ->get(); 

      return \Response::json($student); 
    } 

そしてここでは、Ajaxを使用してビューのページです：

<div class="container" > 
      <h3> View Result </h3> 



     <div class="form-group"> 
      <label for="">Student Reg No.</label> 
      <select class="form-control input-sm" required id="student" name="student_id" > 
      <option>Select a Student</option> 
      @foreach($student as $row) 
      <option value="{{$row->id}}">{{$row->registraion_number}}</option> 
      @endforeach 
      </select> 
     </div> 

     <div class="form-group"> 
     <label>Name</label> 
     <input type="text" name="name" id="name" class="form-control" > 
     </div> 

     <div class="form-group"> 
      <label>Email</label> 
      <input type="text" name="email" id="email" class="form-control" > 
     </div> 

     <div class="form-group"> 
      <label>Department</label> 
      <input type="text" name="department" id="department" class="form-control" > 
     </div> 

     <table class="table table-striped table-bordered" id="example"> 
     <thead> 
      <tr> 
      <td>Serial No</td> 
      <td>Course Code</td> 
      <td>Name</td> 
      <td>Grade</td>      
      </tr> 
     </thead> 
     <tbody> 
     <?php $i=1; ?>  
      @foreach ($student as $row) 
      <tr> 
      <td>{{$i}}</td> 
      <td id="code"></td> 
      <td id="course_name"></td> 
      <td id="grade"></td>   
      </tr> 
      <?php $i++; ?>    
     @endforeach 
     </tbody> 
     </table>   
     </div> 


    <script type="text/javascript"> 
     $('#student').on('change',function(e){  

      var std_id = $('#student option:selected').attr('value'); 

      $.ajaxSetup({ 
         headers: { 
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
         } 
         }); 

        $.ajax({ 
         type: "POST", 
         url : "{{url('ajax-student-result')}}", 
         data:{std_id:std_id}, 
        success : function(data) {     
        $.each(data,function(index,subcatObj){ 
        $('#name').val(subcatObj.name); 
        $('#email').val(subcatObj.email); 
        $('#department').val(subcatObj.d_name); 

        $('#code').html(subcatObj.c_code); 
        $('#course_name').html(subcatObj.c_name); 
        $('#grade').html(subcatObj.grade); 

        }); 
        } 

        }); 

     }); 
    </script> 

Answer 1

私はあなたの問題は内にあると思いますこのコード：

$.each(data,function(index,subcatObj){ 
    $('#name').val(subcatObj.name); 
    $('#email').val(subcatObj.email); 
    $('#department').val(subcatObj.d_name); 

    $('#code').html(subcatObj.c_code); 
    $('#course_name').html(subcatObj.c_name); 
    $('#grade').html(subcatObj.grade); 

}); 

データの配列が得られますが、jquery.eachメソッドを使用しているため、（行が1つしかないため）テーブル行の値が上書きされます。あなたはすべての配列データを表示したい場合は

、あなたは例えば、テーブルに新しい行を追加する必要があります。これは、配列内の各キーのテーブルに新しい行を作成します

success : function(data) { 
    // First empty table 
    $("#example").empty(); 

    // Populate table with student info and courses 
    $.each(data,function(index,subcatObj) { 
     $('#example tbody').after('<tr><td>'+subcatObj.name+'</td></tr>'+ ... +'<tr><td>'+index+'</td><td id="code">'+subcatObj.c_code+'</td> ... </tr>'); 
    }); 
} 

編集：あなたはまた、新しい生徒を選択するときにテーブルを空にする必要があります。私は別のものを選択している間、私はAjaxのコールバック