JavaScript多维数组-对象链接

debugcn 发表于 Dev

阿南德·辛格（Anand Deep Singh）

我正在使用JavaScript多维数组。

这是场景：-

我有一个教育机构，用户可以在任何学科上课。主题不固定，可能会有所不同。现在有考试日，因此假设有PHP Lang教职人员将输入他的科目名称，学生名称然后标记。如果学生自己注册了多于一门科目，则其分数将列在同一行中。

例如，Anand先生已经注册了PHP和HTML，而Deep先生仅注册了Php。

另外，我也想显示最小和最大标记。

因此在结果日结果卡上

Name\Subject | PHP  |  HTML   |  Java
--------------------------------------
Anand        | 80   |  60     |  --
Deep         | 70   |  --     |  --
Sachin       | 55   |  56     |  45
so on ...    | --   |  --     |  80
--------------------------------------
Min Marks    | 70   |  56     |  45
Max Mark     | 80   |  60     |  80

我创建了一个多维数组，但是无法按照视觉再现代码。我想我做错了。

以下是我到目前为止创建的代码：-

var data = [
    ["HTML", [{
        "name": "Anand",
        "marks": 90
    }, {
        "name": "Deep",
        "marks": 79
    }, {
        "name": "Raman",
        "marks": 34
    }]],
    ["Php", [{
        "name": "Anand",
        "marks": 90
    }, {
        "name": "Ekam",
        "marks": 40
    }]]
]

for (var i = 0; i < data.length; i++) {
    document.write("<h2> " + data[i][0] + " </h2>");

    var secondLevelData = data[i][1],
        secondLen = secondLevelData.length;

    for (var j = 0; j < secondLen; j++) {
        document.write(secondLevelData[j].name + " -- " + secondLevelData[j].marks + " <br/>");
    }
}

请帮助我获得理想的结果。我也在努力。

谢谢你的帮助！！

拉马纳森·穆图拉曼

通过更改JSON，我们可以实现这一目标。还添加了jQuery和下划线库，用于DOM和数组操作

JS小提琴链接：https : //jsfiddle.net/8Lb7x01u/3/

var data = [
{
    "name": "Anand",
    "score": [
        {
            "subject": "HTML",
            "marks": 90
        },
        {
            "subject": "Php",
            "marks": 90
        }
    ]
},
{
    "name": "Deep",
    "score": [
        {
            "subject": "HTML",
            "marks": 79
        }
    ]
},
{
    "name": "Raman",
    "score": [
        {
            "subject": "HTML",
            "marks": 34
        }
    ]
},
{
    "name": "Ekam",
    "score": [
        {
            "subject": "Php",
            "marks": 40
        }
    ]
}
];
var allScores = _.pluck(data,"score");
var allSubjects = _.groupBy(_.flatten(allScores),"subject");
var allStudents = _.pluck(data,"name");
var headerRow = $("<tr></tr>");
$("<th></th>").html("Name\\Subject").appendTo(headerRow); 
for(var subject in allSubjects){

$("<th></th>").html(subject).appendTo(headerRow);    
}
 headerRow.appendTo(".scoreCard");
for(var i=0;i<allScores.length;i++){
var individualScores = _.groupBy(allScores[i],"subject");
var tr = $("<tr></tr>");

$("<td></td>").html(allStudents[i]).appendTo(tr);
    for(var subject in allSubjects)
    {
        if(individualScores[subject]){
 $("<td></td>").html(individualScores[subject][0].marks).appendTo(tr);
        }else
        {
            $("<td></td>").html("...").appendTo(tr);
        }

}
    tr.appendTo(".scoreCard tbody")
}

renderMaxMin("max");
renderMaxMin("min");


function renderMaxMin(param){

    var footerRow = $("<tr></tr>");
    $("<td></td>").html(param+" marks").appendTo(footerRow);    
    for(var subject in allSubjects){
    var marks = _.pluck(allSubjects[subject],"marks");
    var value =(param === "max") ? _.max(marks) : _.min(marks);
    $("<td></td>").html(value).appendTo(footerRow);    
    }
    footerRow.appendTo(".scoreCard tfoot")
}