将一个列表从Controller.php传递到Laravel中的.js文件

Question

我的pageController.php 中有一个数字列表

$half2018 = [235, 1234, 134, 564, 364, 362];
return view('page', 'half2018'=>$half2018); 

我在页面中调用该变量.blade.php

<canvas id="chart_1" class="chart-canvas" data-info="{{ $half2018 }}"></canvas>

然后在页面末尾.blade.php我有

<script src="./assets/js/chart.js"></script>

在我的chart.js文件中，我称之为

let app = document.getElementById('claims_chart_12');
let info = JSON.parse(app.dataset.id);
console.log(info);

由于某些原因，JSON库未加载。将数据传递到.js文件是否正确？

Answer 1

控制器中的语法应该是

$half2018 = [235, 1234, 134, 564, 364, 362];
return view('page', ['half2018' => $half2018]);

或

return view('page', compact('half2018'));

---

在刀片文件中，可以在转换为有效JSON后，在data-*属性中设置变量。使用单引号。

<canvas id="chart_1" class="chart-canvas" data-info='{{ json_encode($half2018) }}'></canvas>

我认为这相当于

<canvas id="chart_1" class="chart-canvas" data-info='@json($half2018)'></canvas>

---

然后，在js中，您可以解析这个JSON。

let canvas = document.getElementById('chart_1');
let info = JSON.parse(canvas.dataset.id);
console.log(info);

Answer 2

@IGP指出了我在Controller.php中的语法

let info = JSON.parse(canvas.dataset.info);
console.log(info)

然后我得到

[235, 1234, 134, 564, 364, 362]

在我的.js文件中。