Looping JSON-Daten in Morris.js und Laravel 5

Question

innerhalb mein Controller ich etwas tun, wie diese

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

Das gibt das folgende

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

Jetzt habe ich diese Daten zu verwenden, ich versuche, eine erstellen Morris.js Diagramm. Innerhalb von Javascript, ich

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

Als ich gibt die Daten an die Konsole I

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

sehen Jetzt bin ich auf dem Morris Teil, bisher habe ich

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

Offensichtlich gebe ich im Moment gefälschte Daten aus. Ich versuche jetzt, meine Datenvariable zu verwenden. Der linke Teil des Objekts repräsentiert eine Spalte auf der X-Achse. Der zweite Teil ist die Anzahl für jede Spalte. Also möchte ich im Wesentlichen zeigen, dass Antwort 1 20, Antwort 2 25 usw. hat.

Wie könnte ich darüber gehen?

Dank

Answer 1

Also für diese Aufgabe wollen Sie eigentlich {!! $responseCounts !!} verwenden, die zum Drucken von ungefilterten Daten, die eine Klinge spezifische Syntax ist. Also, was Ihre Datenvariablen aussehen muss, ist:

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

Das nächste Problem ist, dass das Objekt, das Sie jetzt haben mehrere Schlüsselwertepaare in einem Objekt enthält, aber Sie brauchen eine gut definierte Array mit mehreren Objekten mit 2 Schlüsseln Wertpaare.

var morrisData = []; 

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

Nun werden Sie ein Objekt, das wie folgt aussieht:

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

Und so weiter ...

Dann rufen Sie einfach Morris kann und passieren data:morrisData

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

Natürlich kann man auch das Objekt Server-Seite mit PHP mutieren, aber ich nicht wissen, wie es gebaut wird, damit ich nicht helfen kann.