How to update variable on a foreach in blade laravel with js

问题

I have a page which loads both folders and files available on my database :

Like you can see in the picture, files loaded on a first time load all the files availables on all folders with the following code :

public function index(){
        $folders = Folder::where('user_id', '=', auth()->id())->get();
        $data = collect();
        $filator = collect();

        // loop around the folders
        foreach ($folders as $f){
            $files = DB::table('files')
                ->where("folder_id",'=',$f->id)->count();
            // loop around the files in all folders
            foreach ($f->file as $filatov){
                $filator->push([
                    'fname' => $filatov->path,
                    'id_file' => $filatov->id
                ]);
            }

            $data->push([
                'id' => $f->id,
                'name' => $f->name,
                'count' => $files,
            ]);
        }

        return view('pages.folders',['data'=>$data,'filatov'=>$filator]);
    }

Everything is working fine, but now I want per example on clicking on the "eye" button I show the files that are stored on a specific folder, on the following code I can get the files with the following code :

public function getFiles(Request $request){
        $folder = Folder::find($request->id);
        $filator = collect();

        foreach ($folder->file as $filatov){
            $filator->push([
                'fname' => $filatov->path,
                'id_file' => $filatov->id
            ]);
        }

        return response()->json($filator);
    }

and I can manipulate it with Ajax Request like that :

$("#getfolder").click(function(e){
            $.ajax({
                url: "{{route('get.files')}}",
                method: "get",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data: {id:$('#getfolder').val()},
                success: function (data) {
                    alert(data[0].fname)
                }
            })
        });

and I can get the result :

Now, I wanna know if I can update the variable $filatov only with JS now that I can get the data from my request in that code so I can display files from specific folders on click :

<div class="row">
                @foreach($filatov as $d)
                    <div class="col-md-6">
                        <div class="card mt-1">
                            <div class="card-content py-50 px-1 folder-info">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span><i class="feather icon-file-text font-medium-5"></i></span>
                                </div>
                                <div class="row align-items-center">
                                    <div class="col-md-10">
                                        <h6 class="font-medium-2 mb-0">{{$d['fname']}}</h6>
                                    </div>
                                    <div class="col-md-2">
                                        <button value="{{$d['id_file']}}" type="button" id="download" class="btn btn-sm btn-icon btn-success waves-effect waves-light"><i class="feather icon-download"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

Thank you in advance for your help !

回答1:

I finally find the way to do that without using Ajax but only jquery thanks to @Swati, so you have to work with classes and ids :

Blade code

@foreach($filatov as $d)
    <div class="col-md-6 folder" id="test{{$d['id_folder']}}" style="display: none">
        <div class="card mt-1">
            <div class="card-content py-50 px-1 folder-info">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <span><i class="feather icon-file-text font-medium-5"></i></span>
                </div>
                <div class="row align-items-center">
                    <div class="col-md-10">
                        <h6 class="font-medium-2 mb-0">{{$d['fname']}}</h6>
                    </div>
                    <div class="col-md-2">
                        <button value="{{$d['id_file']}}" type="button" class="download btn btn-sm btn-icon btn-success waves-effect waves-light"><i class="feather icon-download"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

JS code :

$(".getfolder").click(function(e){
   var id = $(this).val();
   var target = '.folder';
   $(target + '#test' + id).css('display', 'block');
   $(target).not('#test' + id).css('display', 'none');
});

来源：https://stackoverflow.com/questions/64953946/how-to-update-variable-on-a-foreach-in-blade-laravel-with-js