I have a list of numbers in my pageController.php
$half2018 = [235, 1234, 134, 564, 364, 362];
return view('page', 'half2018'=>$half2018);
I call that variable in my page.blade.php
<canvas id="chart_1" class="chart-canvas" data-info="{{ $half2018 }}"></canvas>
Then at the end of page.blade.php I have
<script src="./assets/js/chart.js"></script>
In my chart.js file I call
let app = document.getElementById('claims_chart_12');
let info = JSON.parse(app.dataset.id);
console.log(info);
For some reason, JSON library is not loaded. Is it a right way to pass the data to .js file?
The syntax in your controller should be
$half2018 = [235, 1234, 134, 564, 364, 362];
return view('page', ['half2018' => $half2018]);
or
return view('page', compact('half2018'));
In your blade file, you can set the variable in a data-* attribute after it's converted to valid JSON. Use single quotes for it.
<canvas id="chart_1" class="chart-canvas" data-info='{{ json_encode($half2018) }}'></canvas>
I think this is equivalent to
<canvas id="chart_1" class="chart-canvas" data-info='@json($half2018)'></canvas>
Then, in your js, you can parse this JSON.
let canvas = document.getElementById('chart_1');
let info = JSON.parse(canvas.dataset.id);
console.log(info);
@IGP pointed out my syntax in Controller.php. After I changed the line in chart.js file to
let info = JSON.parse(canvas.dataset.info);
console.log(info)
then I get
[235, 1234, 134, 564, 364, 362]
in my .js file.