Fatal编程技术网

转换对象的JavaScript数组

javascript jquery

转换对象的JavaScript数组,javascript,jquery,underscore.js,kendo-chart,Javascript,Jquery,Underscore.js,Kendo Chart,我有以下两个JavaScript数组： var grades = [ { name: "A", color: "#00FF00" }, { name: "B", color: "#88CC00" }, { name: "C", color: "#AAAA00" }, { name: "D", color: "#CC8800" }, { name: "F", color:

我有以下两个JavaScript数组：

var grades = [ { name: "A", color: "#00FF00" }, 
               { name: "B", color: "#88CC00" },
               { name: "C", color: "#AAAA00" }, 
               { name: "D", color: "#CC8800" }, 
               { name: "F", color: "#FF0000" }];

var studentGrades = [ { Student: "James", Class: "Math", Grade: "A" },
                      { Student: "Lily", Class: "Math", Grade: "B" },
                      { Student: "Bob", Class: "Math", Grade: "C" },
                      { Student: "Tom", Class: "Math", Grade: "C" },
                      { Student: "James", Class: "Science", Grade: "A" },
                      { Student: "Lily", Class: "Science", Grade: "B" },
                      { Student: "Bob", Class: "Science", Grade: "B" },
                      { Student: "Tom", Class: "Science", Grade: "B" },
                      { Student: "James", Class: "Chemistry", Grade: "F" },
                      { Student: "Lily", Class: "Chemistry", Grade: "A" },
                      { Student: "Bob", Class: "Chemistry", Grade: "B" },
                      { Student: "Tom", Class: "Chemistry", Grade: "A" } ];
我试图从中生成以下两个数组：

grades = [ { name: "A", color: "#00FF00", data: [1, 1, 2] },
                    { name: "B", color: "#88CC00", data: [1, 3, 1] },
                    { name: "C", color: "#AAAA00", data: [2, 0, 0] },
                    { name: "D", color: "#CC8800", data: [0, 0, 0] },
                    { name: "F", color: "#FF0000", data: [0, 0, 1] } ];

var classes = [ "Math", "Science", "Chemistry" ];
有没有一种简单的方法可以做到这一点，而不必循环检查学生的成绩，维护计数和唯一的班级列表

编辑：发布问题后，我创建了以下代码。我仍然更喜欢一种更简单、可读性更强的方法

<!DOCTYPE html>
<html>
  <head>
    <base href="http://demos.telerik.com/kendo-ui/bar-charts/local-data-binding">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.bootstrap.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
  </head>
  <body>
    <div id="example">
      <div class="demo-section k-content">
        <div id="chart"></div>
      </div>
      <script>

        // Start of code that is specific to the stackoverflow question

        var grades = [ { name: "A", color: "#00FF00" }, 
                       { name: "B", color: "#88CC00" },
                       { name: "C", color: "#AAAA00" }, 
                       { name: "D", color: "#CC8800" }, 
                       { name: "F", color: "#FF0000" }];

        var studentGrades = [ { Student: "James", Class: "Math", Grade: "A" },
                              { Student: "Lily", Class: "Math", Grade: "B" },
                              { Student: "Bob", Class: "Math", Grade: "C" },
                              { Student: "Tom", Class: "Math", Grade: "C" },
                              { Student: "James", Class: "Science", Grade: "A" },
                              { Student: "Lily", Class: "Science", Grade: "B" },
                              { Student: "Bob", Class: "Science", Grade: "B" },
                              { Student: "Tom", Class: "Science", Grade: "B" },
                              { Student: "James", Class: "Chemistry", Grade: "F" },
                              { Student: "Lily", Class: "Chemistry", Grade: "A" },
                              { Student: "Bob", Class: "Chemistry", Grade: "B" },
                              { Student: "Tom", Class: "Chemistry", Grade: "A" } ];

        var classes = [];

        // Returns an array that maintains the grade counts for each class based on the grades array.
        var getGradeCounts = function (studentData, gradeCounts) {
            if (gradeCounts == null) {
                gradeCounts = [];
            }
            for (var i = 0; i < grades.length; i++) {
                if (gradeCounts[i] == undefined) {
                    gradeCounts[i] = 0;
                }
                if (grades[i].name === studentData.Grade) {
                    gradeCounts[i]++;
                }
            }
            return gradeCounts;
        }

        // Iterates over each student grade and maintains an object of the grade counts by class, and an unique array of classes used for the chart category.
        var classGradeCounts = {};
        for (var student in studentGrades) {
            var studentClass = studentGrades[student].Class;
            if (classGradeCounts[studentClass] == undefined) {
                classes.push(studentClass);
            }
            classGradeCounts[studentClass] = getGradeCounts(studentGrades[student], classGradeCounts[studentClass]);
        }

        // Now that we have the grade counts for each class, build up the chart series
        for (var i = 0; i < grades.length; i++) {
            grades[i].data = [];
            for (var classGradeCount in classGradeCounts) {
                grades[i].data.push(classGradeCounts[classGradeCount][i]);
            }
        }

        // End of stackoverflow code, the rest of this is code is used to generate a Kendo chart.

        var chartSettings = {
            seriesDefaults: { type: "column", stack: true },
            series: grades,
            categoryAxis: { categories: classes },
        };

        function createChart() {
          $("#chart").kendoChart(chartSettings);
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
      </script>
    </div>


  </body>
</html>


html{字体大小：12px；字体系列：Arial、Helvetica、sans serif；}
//特定于stackoverflow问题的代码开始
变量等级=[{名称：“A”，颜色：#00FF00”}，
{名称：“B”，颜色：#88CC00}，
{名称：“C”，颜色：#AAAA00}，
{名称：“D”，颜色：“CC8800”}，
{名称：“F”，颜色：#FF0000}；
var studentGrades=[{学生：“詹姆斯”，班级：“数学”，年级：“A”}，
{学生：“莉莉”，班级：“数学”，成绩：“B”}，
{学生：“鲍勃”，班级：“数学”，年级：“C”}，
{学生：“汤姆”，班级：“数学”，年级：“C”}，
{学生：“詹姆斯”，班级：“科学”，年级：“A”}，
{学生：“莉莉”，班级：“科学”，年级：“B”}，
{学生：“鲍勃”，班级：“科学”，年级：“B”}，
{学生：“汤姆”，班级：“科学”，年级：“B”}，
{学生：“詹姆斯”，班级：“化学”，年级：“F”}，
{学生：“莉莉”，班级：“化学”，年级：“A”}，
{学生：“鲍勃”，班级：“化学”，年级：“B”}，
{学生：“汤姆”，班级：“化学”，年级：“A”}；
var类=[]；
//返回一个数组，该数组基于grades数组维护每个类的等级计数。
var getGradeCounts=函数（studentData，gradeCounts）{
if（gradeCounts==null）{
成绩计数=[]；
}
对于（变量i=0；i
您无法避免循环。通过使用诸如和之类的函数，可以使它看起来没有循环

我认为最简单的方法是创建地图，让您能够快速访问所需的数据，这样您就不必经常扫描数组，也不需要像
下划线
或
jQuery
这样的助手。这些映射的一个好处是，您可以轻松地使用它们以更轻松的方式生成不同格式的数据

您可以研究以下生成所需输出的方法，并自行决定是否比使用常规循环更容易

var grades=[{name:“A”，color:#00FF00}，
{名称：“B”，颜色：#88CC00}，
{名称：“C”，颜色：#AAAA00}，
{名称：“D”，颜色：“CC8800”}，
{名称：“F”，颜色：#FF0000}；
var studentGrades=[{学生：“詹姆斯”，班级：“数学”，年级：“A”}，
{学生：“莉莉”，班级：“数学”，成绩：“B”}，
{学生：“鲍勃”，班级：“数学”，年级：“C”}，
{学生：“汤姆”，班级：“数学”，年级：“C”}，
{学生：“詹姆斯”，班级：“科学”，年级：“A”}，
{学生：“莉莉”，班级：“科学”，年级：“B”}，
{学生：“鲍勃”，班级：“科学”，年级：“B”}，
{学生：“汤姆”，班级：“科学”，年级：“B”}，
{学生：“詹姆斯”，班级：“化学”，年级：“F”}，
{学生：“莉莉”，班级：“化学”，年级：“A”}，
{学生：“鲍勃”，班级：“化学”，年级：“B”}，
{学生：“汤姆”，班级：“化学”，年级：“A”}；
变量gradeMap={}，gradesByClass={}，classMap={}，classArray=[]，classIndex=0；
等级。forEach（功能（等级）{
gradeMap[grade.name]=grade.color；
});
学生成绩。forEach（函数（学生成绩）{
如果（！gradesByClass[studentGrade.Class]）{
gradesByClass[studentGrade.Class]={}；
classMap[studentGrade.Class]=classIndex；
classIndex++；
}