select multiselect values from ajax resonse after edit button click-CodePudding

I have an Edit button. When onclick event is triggering data from the main table is showing in an input field, but related data from pivot does not get selected from JSON response. In JSON output, I can view both main table data with pivot data related to particular id. But this data is not get selected in a multi-select element.

Main Table : 1)SchoolSubject 2)StudentClass

Pivot Table: Student_Class_School_Subject

Controller

public function EditSubject(Request $request)
{
    $id = $request->id; //get id from blade 
    $subject = SchoolSubject::with('class')->where('id',$id)->first();  //select subject data match with id with class stored in pivot          
    return response()->json($subject); //output comes with subject and class stored in pivot
}

edit.modal.blade.php

<div  id="classSelector">
    <select name="class_id[]" multiple="multiple" id="classSelect" required="" >
        <option value="-1" selected="" disabled="">
         Select Class
        </option>
       @foreach ($allClassData as $class)
       <option value="{{ $class->id }}">                                                                                
            {{ $class->name }}
       </option>
       @endforeach                                                                        
   </select>
</div>

view.blade.php

@section
<script>
    $(document).on('click', '.editIcon', function(e) {
            e.preventDefault();
            let id = $(this).attr('id');                
            var _url = '{{ route('subject.edit.route') }}';
            $.ajax({
                url: _url,
                method: 'get',
                data: {
                    id: id,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log(response.class);
                    $("#subject_id").val(response.id);//data from main table got successfully from same json response
                    $("#subject_i").val(response.subject); //data from main table got successfully from same json response
                    var pivotData = response.class; //this is data from pivot table but how to select multislect select box value from this json response
                    
                    jQuery("#classSelect option").each(function() {
                        if (jQuery.inArray($(this).val(), response.class) != -1) {
                            $(this).prop('selected', true);
                        };
                    }); //this query is not working

                    
                    /*var newHTML = [];
                    for (var i = 0; i < response.class.length; i  ) {
                        newHTML.push('<span>'   response.class[i]   '</span>');
                        console.log(response.class[i])
                    }
                    $("#resultchecker").html(newHTML.join(""));*/
                }
            });
        });
</script>
@endsection

JSON response from pivot table using response.class

JSON response from pivot table using response

CodePudding user response：

Because you have a nested array of objects in your JSON, you have to loop once more and select the id. I'm sure there are better ways to do this, but at least you get the idea.

Change this part

jQuery("#classSelect option").each(function() {
   if (jQuery.inArray($(this).val(), response.class) != -1) {
      $(this).prop('selected', true);
   };
}); //this query is not working

Like this

jQuery("#classSelect option").each(function() {
   var $this = jQuery(this);
   response.class.forEach(element => {
      if($this.val() == element.id) {
         $this.prop('selected', true);
      }
   });
});