如何在jQuery中输出JSON数组？Laravel 5.6+AmCharts场景疑问

嘿，我来帮你搞定这个需求！你要把Laravel查询返回的JSON数据正确放到AmCharts的dataProvider里，其实只要注意几个细节就能轻松实现，下面是具体步骤：

1. 确保Laravel控制器正确传递数据到视图 #

首先在你的控制器里，把查询结果赋值给视图变量，确保数据是正确的集合：

// 示例控制器代码
$dailyCounts = DB::table('your_target_table')
    ->select(DB::raw('DAY(created_at) as day'), DB::raw('COUNT(*) as count'))
    ->groupBy('day')
    ->get();

return view('your_chart_view', compact('dailyCounts'));

这里我把变量名改成了$dailyCounts，比$query更语义化，你可以根据自己的实际情况调整。

2. 在视图中正确注入JSON到JavaScript #

你之前尝试用json_encode的思路是对的，但要注意Blade模板的转义规则：

• {{ }}会自动转义HTML字符，导致JSON里的引号变成"，这样JavaScript无法正确解析
• 所以必须用{!! !!}来输出未转义的原始JSON

直接把数据注入到dataProvider，同时保留你需要的.reverse()方法，代码如下：

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "dataProvider": {!! json_encode($dailyCounts) !!}.reverse(),
    // 你的其他图表配置项...
});

3. 可选：先存为JS变量再使用 #

如果觉得直接注入到配置里不够清晰，也可以先把数据赋值给一个JavaScript变量，再用到图表配置中：

// 先把Laravel数据转成JS变量
var chartData = {!! json_encode($dailyCounts) !!};

// 初始化图表
var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "dataProvider": chartData.reverse(),
    // 其他配置...
});

4. 验证数据是否正确输出 #

打开浏览器开发者工具（按F12），查看页面源代码，确认dataProvider后面的JSON是正确的格式，比如应该显示：

dataProvider: [{"day":19,"count":1},{"day":18,"count":3}].reverse(),

如果看到"这样的转义字符，说明你用了{{ }}，换成{!! !!}就能解决。

内容的提问来源于stack exchange，提问作者utkarsh2k2