Being new to frontend development, I am facing some challenges with a specific issue. In my application, there is a "schedules" table which includes columns for "violation" and "remarks". The complexity arises when trying to loop through the remarks values stored in the database related to the checkers and display them in a Vue component.
In the provided images, you can see how the remarks are currently being displayed based on the database values.
The main challenge lies in efficiently fetching and displaying these remarks without duplicating the data if multiple remarks exist for a single entry in the database.
To give you more context, here's an excerpt from the query used to retrieve this data:
//query example
$scid = $request->id;
$round = \DB::table('rounds')
->select('rounds.*','checkers.*','remarks.*','violations.*')
->join('checkers','checkers.id','=','rounds.checker_id')
->join('checker_details','rounds.id','=','checker_details.round_id')
->join('remarks','remarks.id','=','rounds.remarks_id')
->join('violations','violations.id','=','checker_details.violation_id')
->where('checkers.schedule_id',$scid)
->where('rounds.round_no','=',1)
->distinct('rounds.remarks_id')
->get();
return response()->json($round);
I hope this provides a clearer picture of the issue at hand. Thank you for your assistance in tackling this problem.