在 Morris.js 和 Laravel 5 中循环 JSON 数据

Question

在我的控制器中，我做这样的事情

$responseCounts = json_encode(array_count_values($countArray));
dd($responseCounts);

这会输出以下内容

"{"Answer 4":6,"Answer 2":25,"Answer 3":19,"Answer 1":20}"

现在我正在尝试使用这些数据来创建 Morris.js 图表。在 Javascript 中，我会这样做

<script>
    $(function() {
        var data = '{{ $responseCounts }}';
        data = data.replace(/&quot;/ig,'"');
        data = JSON.parse(data)
        console.log(data);
    });
</script>

当我将数据输出到我看到的控制台时

Object { Answer 4=6,  Answer 2=25,  Answer 3=19,  more...}

现在我是莫里斯的一部分，到目前为止我已经

Morris.Bar({
    element: 'chart',
    data: [
        { Answers: 'A', Count: 3 },
        { Answers: 'B', Count: 10 },
        { Answers: 'C', Count: 5 },
        { Answers: 'D', Count: 17 }
    ],
    xkey: 'Answers',
    ykeys: ['Count'],
    labels: ['Answers']
});

显然，目前我正在输出假数据。我现在要做的是使用我的数据变量。对象的左侧部分代表 X 轴上的一列。第二部分是每列的计数。所以我基本上想表明答案 1 有 20，答案 2 有 25 等等。

我该怎么做呢？

谢谢

Answer 1

因此，对于此任务，您实际上希望使用{!! $responseCounts !!}，它是用于打印未过滤数据的刀片特定语法。因此，您的数据变量需要如下所示：

var data = JSON.parse({!! $responseCounts !!});

下一个问题是，您现在拥有的 Object 在一个对象中包含多个键值对，但您需要一个定义明确的数组，其中包含具有 2 个键值对的多个对象。

var morrisData = [];

$.each(data, function(key, val){
    morrisData.push({'Answer': key.split('Answer')[1], 'Count' : val}); 
});

现在您将拥有一个如下所示的对象：

[
    { 'Answer' : 2, 'Count' : 25 },
    { 'Answer' : 3, 'Count' : 19 }
    { 'Answer' : 4, 'Count' : 6 }
]

等等……

然后你可以简单地调用Morris并传递data:morrisData

Morris.Bar({
    element: 'chart',
    data:morrisData,
    xkey: 'Answers',
    ykeys: ['Count'],
    labels: ['Answers']
});

当然你也可以用 php 在服务器端改变对象，但我不知道它是如何构造的，所以我无能为力。