JavaScript Multidimensional Array - Object Linking

Question

I am working with javascript multidimensional array.

Here is the scenario:-

I have a educational institution where user can take classes from any subject. Subjects are not fixed it could be vary. Now there is exam day so suppose there is PHP Lang faculty who will enter his subject name then student name and then marks. If student is enrolled himself for more then 1 subject so its marks will listed in same row.

for example Mr. Anand has enrolled for PHP and HTML and Mr. Deep has enrolled himself for Php only.

Additionally I also want to show minimum and maximum marks as well.

So on result day result card will

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

I have created a multidimensional array but unable to reproduce code as per visual. I think I am doing something wrong.

Below is the code which I have created as of now :-

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

Please help me to get the desired result. I am also working on it.

Thanks for your help!!

What does the title of the question have to do with the question? I can't see any object linking here — kumarharsh
– kumarharsh, Commented May 14, 2015 at 5:52
vigneswaran I want to do it with the help of JSON and kumar I want to link PHP with the people who was data related to that. Hope my description has cleared your doubts — Anand Deep Singh
– Anand Deep Singh, Commented May 14, 2015 at 5:56
@Moogs I want to create a upper define table with the help of JSON and JavaScript — Anand Deep Singh
– Anand Deep Singh, Commented May 14, 2015 at 5:57

Ramanathan Muthuraman · Accepted Answer · 2015-05-14 07:59:28Z

1

By changing the JSON we can achieve this. Also added jQuery and underscore libraries for DOM and array manipulations

JS Fiddle Link : 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")
}

edited May 14, 2015 at 7:59

answered May 14, 2015 at 7:18

Ramanathan Muthuraman

7523 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anand Deep Singh Over a year ago

thank you so much @ramanathan. Can we do it with the help of jquery and javascript only? If yes then it will be great. It may possible that code will be long but its fine. Please suggest!!

Ramanathan Muthuraman Over a year ago

Underscore is a very useful utility library and its also open source weighing only 6kb, so my suggestion would be to go with it. Also added the min/max marks logic jsfiddle.net/8Lb7x01u/3

Ramanathan Muthuraman Over a year ago

If you still insist in removing underscore, then the following underscore functions pluck,groupBy,flatten,min,max should be re-written, which is like reinventing the wheel.

Araknid · Accepted Answer · 2015-05-14 06:02:53Z

0

You are not using the markup in the right manner. You should form the correct markup first, in this case it would be tables.

Also, the way you are storing data could be improved by using associative arrays. It will help you to manage it and use it better as the size of data grows. Here is how you can do that :

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

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

answered May 14, 2015 at 6:02

Araknid

4764 silver badges10 bronze badges

1 Comment

Anand Deep Singh Over a year ago

I can modify JSON to get the desired result. Please suggest!!

Collectives™ on Stack Overflow

JavaScript Multidimensional Array - Object Linking

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related