Question

我正在使用javascript多维数组。

以下是该方案： -

我有一个教育机构，用户可以从任何科目上课。受试者没有固定，可能会有所不同。现在有考试日，所以假设有一些PHP Lang教员将输入他的学科名称，然后输入学生姓名，然后进行标记。如果学生注册了超过1个科目，那么其分数将列在同一行中。

例如，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/>");
    }
}

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

感谢您的帮助!!

Answer 1

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

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")
}

Answer 2

您没有以正确的方式使用标记。您应该首先形成正确的标记，在这种情况下它将是表格。

此外，通过使用关联数组可以改善存储数据的方式。随着数据量的增长，它将帮助您管理并更好地使用它。以下是如何做到这一点：

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

           {'PHP' :
          [{"name":"Anand","marks": 90},
          {"name":"Ekam","marks": 40}]
          }]]

JavaScript多维数组 - 对象链接

2 个答案: