在Laravel中使用JavaScript的forEach循环

Question

在控制器中，我获取了数据：

$records = Products::select('price')->get();

而在Blade模板中，我想要将这些数据循环填充到图表脚本中，以便基于这些数据绘制图表：

原始的图表脚本是硬编码的数据点：

现在页面显示为空白，应该如何解决这个问题？

问题在于，你尝试在JavaScript数组中直接嵌入PHP循环输出变量。为了正确地将从数据库获取的价格数据传递给CanvasJS图表，你需要确保数据点的JSON结构有效，并且每个价格都被适当地转义以适应JavaScript环境。请尝试修改Blade模板中的dataPoints部分，确保数据被正确包裹在引号中：

@foreach($records as $prc)
{ y: "{{ $prc->price }}" },
@endforeach

同时，请确认循环后的数据点之间是否有额外的逗号导致语法错误，通常在循环内部最后一个元素后不添加逗号可以避免这个问题：

@foreach($records as $index => $prc)
{ y: "{{ $prc->price }}" }@if(!$loop->last),@endif
@endforeach

这样，在循环到最后一个数据点时不会产生多余的逗号，确保生成的JavaScript语法有效。如果仍有问题，请检查控制台是否有任何JavaScript错误或者网络请求是否正常加载数据。

Jonathan Livni · Answer

在Laravel中使用blade模板结合JavaScript循环实现图表数据填充的方法确实能够完美运行：

这段代码会在页面加载完成后，使用从控制器传递过来并存储在 $records 中的产品价格数据动态构建一个CanvasJS折线图的数据点数组。当Blade模板引擎渲染此段HTML时，它会将PHP循环内的{{$prc->price}}替换为实际的价格值，从而生成有效的JavaScript代码来填充图表数据。

McGarnagle · Answer

尝试这段代码：

这段代码首先在JavaScript中通过PHP将服务器端变量 $records 的值转换为字符串，并将其赋给 records 变量。然后，假设 records 是一个包含多个对象（每个对象有一个名为 price 的属性）的JSON格式字符串，它会被解析成JavaScript数组，并通过 .map() 方法遍历生成一个新的数组 data，其中每个元素都是一个对象，包含 y 属性对应于原记录中的价格。

接下来，基于这个新的 data 数组，初始化一个CanvasJS折线图实例，并设置其动画效果、主题样式、标题以及数据点信息。最后，调用 render() 方法展示图表。不过，请注意，在实际应用中，如果 $records 不是一个可以直接被JavaScript解析的JSON格式字符串，那么上述的 records.map() 将无法正常工作，需要确保正确序列化和反序列化数据。