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

时间:2016-03-21 17:45:04

标签: javascript laravel laravel-5 morris.js

在我的控制器中我做了类似的事情

$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']
});

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

我怎么能这样做?

由于

1 个答案:

答案 0 :(得分:3)

因此,对于此任务,您实际上希望使用{!! $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改变对象服务器端,但我不知道它是如何构建的,所以我无法帮助那里。