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

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

$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，依此类推。

我该怎么做呢？

谢谢

最佳答案

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

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

下一个问题是您现在拥有的对象在一个对象中包含多个键值对，但是您需要一个定义良好的数组，其中多个对象具有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更改对象服务器端，但是我不知道它是如何构造的，因此我在那儿无能为力。