I am currently having a trouble accessing the data that is passed through my controller to go to my JavaScript/jQuery Function.
Here is my controller
FruitsController.php
public function displayFruits()
{
// assuming that the $fruits array values are extracted from the database
$fruits = ['banana', 'apple', 'mango'];
// dd($fruits);
return view('auth.user_settings', [
'fruits' => $fruits
]);
}
so when I tried to dd the fruits it is display the array values.
and same goes to the auth.user_settings
it displays the array values when using foreach to the variable.
as for my js file it is named as dropdown.js
$(document).ready(function() {
// I want to fetch the array fruits here
let arrayFruits = [];
console.log(arrayFruits);
});
and as you can see above the view that it returns is on auth.user_settings
the structure of the auth.user_settings
is something like this;
<x-user_settings>
// the content of the user_settings goes here. I have created a separate component for the dropdown so it won't get clustered.
// I can access the fruits that was passed by the controller in this page
<-x-fruits_dropdown>
//dropdown ui here
</x-fruits_dropdown>
</x-user_settings>
What I want to achieve is that I want the controller to pass the data as well on my javascript file or in my jquery function.
I have tried adding this one the user_settings
blade file
<script>
var fruits = @json($fruits);
</script>
however it just throws an error that I the $fruits is undefined.
Any ideas better/approach or help are appreciated.