Laravel如何将控制器的对象数组传递到Blade的JavaScript中？

场景说明 #

控制器传递的PHP对象数组如下：

Array ( 
    [0] => stdClass Object ( [id] => 14 [content] => সংবাদ [start] => 2022-10-17 00:00:00 ) 
    [1] => stdClass Object ( [id] => 15 [content] => সংবাদ [start] => 2022-10-17 00:00:00 ) 
    [2] => stdClass Object ( [id] => 11 [content] => সংবাদ [start] => 2022-09-28 00:00:00 ) 
    [3] => stdClass Object ( [id] => 12 [content] => সংবাদ [start] => 2022-09-28 00:00:00 ) 
    [4] => stdClass Object ( [id] => 1 [content] => সংবাদ [start] => 2022-09-27 00:00:00 ) 
)

希望在Blade模板的JavaScript代码中，将该数组转换为vis.DataSet实例，目标JS代码格式如下：

var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: '2014-04-20'},
    {id: 2, content: 'item 2', start: '2014-04-14'},
    {id: 3, content: 'item 3', start: '2014-04-18'},
]);

尝试的代码及报错 #

使用以下代码尝试：

var items = new vis.DataSet({{$timeline}});

出现错误：

htmlspecialchars(): Argument #1 ($string) must be of type string, array given

错误原因及解决方案 #

错误原因 #

Blade模板的{{ }}语法默认会调用htmlspecialchars()对输出内容进行转义，而你直接传入了PHP数组/对象，该函数无法处理非字符串类型的参数，因此抛出错误。同时，直接输出PHP数组的字符串表示（比如Array (...)）也不符合JavaScript的数组格式要求。

解决方法 #

需要将PHP数组/对象转换为符合JavaScript语法的JSON格式，以下两种方法均可：

方法1：使用Blade的@json指令（推荐）

@json会自动将PHP变量转换为合法的JSON字符串，同时处理HTML转义，适合在JavaScript中使用：

var items = new vis.DataSet(@json($timeline));

方法2：使用json_encode()和{!! !!}

如果需要手动控制JSON编码选项（比如处理Unicode字符、格式化输出等），可以使用json_encode()，并用{!! !!}输出以避免Blade自动转义：

var items = new vis.DataSet({!! json_encode($timeline) !!});

两种方法都会将你的PHP对象数组转换为JavaScript可识别的数组格式，最终生成的代码会和你期望的目标JS结构一致。

内容的提问来源于stack exchange，提问作者Muntashir Are Rahi