Enhancing Data Management with JSON: Overcoming Array Limitations
Enhancing Data Management with JSON: Overcoming Array Limitations
Here, we have a simple program that handles student details.
It includes students' marks, and the program calculates their average.
The result then determines whether the student has passed or not.
Program 1:StudenDetails.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var sname = 'Pankaj';
var sage = 20;
var submarks1 = 44 ;
var submarks2 = 55 ;
var submarks3 = 65 ;
var submarks4 = 34 ;
var avg = 0 ;
// display marks
console.log("Student name is " + sname);
console.log("Student Age is "+ sage);
console.log("marks for subject 1 " + submarks1);
console.log("marks for subject 2 " + submarks2);
console.log("marks for subject 3 " + submarks3);
console.log("marks for subject 4 " + submarks4);
// display average
avg = (submarks1 + submarks2 + submarks3 ) /4 ;
console.log("Average is "+ avg);
// display whether pass or fail
if (avg > 40){
console.log("You have passed ");
}
else{
console.log("You have a surprise");
}
</script>
</body>
</html>
Output 1
Now, the problem with this code is that:
var name = 'Pankaj';
var sage = 20;
var submarks1 = 44;
var submarks2 = 55;
var submarks3 = 65;
var submarks4 = 34;
The variables sname, sage, and submarks belong to the same group,
so they should be organized together.
Solution:
Store student details in an array, as demonstrated in the next program.
Program 2 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var studentDetails = ['Pankaj', 20 , [44,55,65,34],0,0]; // putting marks in a sub array .. array is a heterogenous data structure
// displaying the student details
console.log(studentDetails);
// display marks
console.log("marks for subject 1 " + studentDetails[2][0]);
console.log("marks for subject 2 " + studentDetails[2][1]);
console.log("marks for subject 3 " + studentDetails[2][2]);
console.log("marks for subject 4 " + studentDetails[2][3]);
// display average
var sum = 0 ;
for(var i = 0 ; i<= studentDetails[2].length-1 ; i++){
sum += studentDetails[2][i] ;
}
studentDetails[3]=sum/studentDetails[2].length ;
console.log("Average is "+ studentDetails[3]);
// display whether pass or fail
if (studentDetails[3] > 40){
studentDetails[4]= 'You have passed' ;
console.log("Result is " + studentDetails[4]);
}
else{
studentDetails[4]= 'You have a Surprise ' ;
console.log("Result is " + studentDetails[4]);
}
// displaying all student details in one go
console.log(studentDetails);
</script>
</body>
</html>
Output 2
Here, we see that we are not using any variable storage for data; rather, the data is fetched from an array.
This is certainly a better method than the previous one, but it has a problem.
PROBLEM:
Suppose the developer makes a mistake while displaying the student's name.
In this case, sname should be accessed using StudentDetails[0].
However, if the developer mistakenly accesses StudentDetails[1], the system will generate an error.
This is one of the limitations of arrays.
SOLUTION:
If we assign a key to every value, the above problem can be resolved.
This functionality is provided by JSON, which is explained in the next program.
Program 3 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var studentDetails = {
sname : 'Pankaj',
sage :20 ,
smarks : {
submarks1 : 44 ,
submarks2 : 55 ,
submarks3 : 65 ,
submarks4 : 34 ,
},
avg: 0,
result:0 ,
} // putting marks in a JSON .. JSON is a heterogenous data structure
// displaying the student details
console.log(studentDetails);
// display marks
console.log("marks for subject 1 " + studentDetails.smarks.submarks1);
console.log("marks for subject 2 " + studentDetails.smarks.submarks2);
console.log("marks for subject 3 " + studentDetails.smarks.submarks3);
console.log("marks for subject 4 " + studentDetails.smarks.submarks4);
// display average
var sum = 0 ;
for(var i in studentDetails.smarks){
sum += studentDetails.smarks[i] ;
}
studentDetails.avg = sum/(Object.keys(studentDetails.smarks).length);
console.log("Average is "+ studentDetails.avg);
// display whether pass or fail
if (studentDetails.avg > 40){
studentDetails.result= 'You have passed' ;
console.log("Result is " + studentDetails.result);
}
else{
studentDetails.result= 'You have a Surprise ' ;
console.log("Result is " + studentDetails.result);
}
// displaying all student details in one go
console.log(studentDetails);
/* Notes and explanations
*/
</script>
</body>
</html>
Output 3 :
Now, in the program above, all the limitations of arrays are resolved by using a JSON structure. JSON allows us to store related data in a key-value format, making it easier to access specific values without relying on index positions. This approach improves data organization, reduces errors, and enhances readability, ensuring that each student's details, marks, average, and result are efficiently managed and retrieved.
