I was trying to store a two-dimensional with the data value from user input. Say, storing students' test results into that array. I have managed to do this with a one-dimensional array but failed to relate a 2D array to the user input. I checked many 2D arrays examples and found out that this would be much easier if using Java instead of Javascript, but currently, this is the only language I have knowledge of, and I do wonder how it could be done using Javascript. I've also tried using a position variable "i" to connect the input and array but couldn't figure it out.
2 Answers
I see two solutions for your problem. The first one is how I would do it and is more opinionated, and uses Objects. The second one is with a 2D array. Hope that helps!
A personal approach and suggestion
I think you're better off using objects instead of n-dimensional arrays. A solution I see, provided the data you've shown:
// Define a student object
function Student(_name, _mark1, _mark2, _mark3) {
this.name = _name;
this.mark1 = _mark1;
this.mark2 = _mark2;
this.mark3 = _mark3;
}
// Define the array that will hold the students and their marks
var TestResults = [];
// Process HTML
var Name = document.getElementById("Name").value;
var Mark1 = document.getElementById("Mark1").value;
var Mark2 = document.getElementById("Mark2").value;
var Mark3 = document.getElementById("Mark3").value;
// Add new student record
TestResults.push(new Student(Name, Mark1, Mark2, Mark3));
// At any time now you can access the data like so:
// TestResults[index].name gives the name of the student
// TestResults[index].mark1 gives the first mark
// ...
// TestResults[0].Name => Will give you the name of the first student in the array
The direct answer to your question
var TestResults = [];
// For each processed student
TestResults.push([Name, Mark1, Mark2, Mark3]);
// Now you can access your data only by indexes
// TestResults[0][0] will give you the name of the first student
// TestResults[1][1] will give you the first mark of the second student
// ...
6 Comments
Sane
Brilliant! I really appreciate the effort and time you spent in answering this question. But I suddenly realized that I probably shouldn't ask this question on stack overflow. Even though I'm seeking help, I'm afraid that using your code considered as plagiarism. Many many thanks but I probably can't use your code. I apologize for my imprudence.
ful-stackz
I'm glad you asked this question and that I could help! Using the example I gave you would not be plagiarism in any way. StackOverflow is about learning and solving problems; and that is exactly what you did. You are learning, which is awesome, and you had a problem - which two different people solved in the exact same way. We just happened to think of a better approach to your problem and share it with you. You can use it as much as you like and learn it for solving future problems! Good luck with programming!
Sane
I have a question. I just checked the javascript "push" method. Its basic use is to add other elements to already-existent arrays. Then I found myself unable to build a two-dimensional array with this method, for it only replaces the previous set of array instead of adding a new row to it.
ful-stackz
How exactly are you using it?
Sane
I used your direct answer to my question, the push method line, after which is document.getElementById("demo").innerHTML = TestResults;. Then I input the data and click the button, an array is displayed. However when I click the button again I only get the same 1D array, there's no array accumulating.
|
You can create a 2D array simply by making an array literal like:
var TestResults = [Name, [Mark1, Mark2, Mark3]];
Here TestResults[0] is the name and TestResults[1] is an array of scores. The first score would be TestResults[1][0].
However, this may not be the best way to go. An object might make more sense here. For example something like this will be easier to understand when you look at the code later:
var TestResults = {name: Name, scores: [Mark1, Mark2, Mark3]};
Now TestResults.name is the name and TestResults.scores is an array of scores. TestResults.scores[0] is the first score.
With that you can make a simple interface that accepts scores an continues adding them to the page like:
function display() {
var Name = document.getElementById("Name").value;
var Mark1 = document.getElementById("Mark1").value;
var Mark2 = document.getElementById("Mark2").value;
var Mark3 = document.getElementById("Mark3").value;
var testResults = {name: Name, scores: [Mark1, Mark2, Mark3]};
appendResults(testResults)
}
function appendResults(obj) {
var holder = document.getElementById("demo")
var scoreDiv = document.createElement('div')
scoreDiv.innerHTML = obj.name + ': ' + obj.scores.join(', ')
holder.appendChild(scoreDiv)
}Name:<input type="text" id="Name"><br>
Mark1 (0-20):<input type="number" id="Mark1" name="quantity" min="0" max="20"><br>
Mark2 (0-25):<input type="number" id="Mark2" name="quantity" min="0" max="25"><br>
Mark2 (0-35):<input type="number" id="Mark3" name="quantity" min="0" max="35"><br>
<button onclick="display()">Upload</button>
<h4> Scores: </h4>
<p id="demo"></p>