Jump to content

Accessing JSON Elements


jonnyenglish89

Recommended Posts

Hi,

I’d appreciate some help with my homework.

I’ve got to display each student’s name and the results for each of their modules using vanilla JavaScript.

the following code displays the values I’m after, but I’d really like to know how to improve it.

var data = {
   "students":[
      {
         "name":"Eric Smith",
         "modules":{
            "1":{
               "id":"COMP40003",
               "name":"Software Development",
               "result":80
            },
            "2":{
               "id":"COMP40001",
               "name":"Digital technologies",
               "result":71
            },
            "3":{
               "id":"COMP40004",
               "name":"Web Development",
               "result":47
            },
            "4":{
               "id":"COMP40002",
               "name":"Networking Concepts and Cyber Security",
               "result":0
            }
         }
      },
      {
         "name":"Bob",
         "modules":{
            "1":{
               "id":"COMP40003",
               "name":"Software Development",
               "result":80
            },
            "2":{
               "id":"COMP40001",
               "name":"Digital technologies",
               "result":71
            },
            "3":{
               "id":"COMP40004",
               "name":"Web Development",
               "result":47
            },
            "4":{
               "id":"COMP40002",
               "name":"Networking Concepts and Cyber Security",
               "result":0
            }
         }
      }
   ]
};
var json = JSON.parse(JSON.stringify(data));

for (var key in json["students"]) {
	console.log(json["students"][key]["name"]);
	console.log('-------------------');
	
	for (var modkey in json["students"][key]["modules"]) {
	console.log(json["students"][key]["modules"][modkey]["name"] + " " + json["students"][key]["modules"][modkey]["result"]);
	console.log('-------------------');
	};
};

Thanks

Link to comment
Share on other sites

Well for one,

var json = JSON.parse(JSON.stringify(data));

don't do that. You're starting with an object, turning it into a JSON string, and then turning it right back into an object. There's no point.

That aside, one improvement would be to use object syntax instead of array syntax for accessing members. Array syntax with [ ]s is fine when the name is in a variable, or it has some weird name you know but can't write out (like it has hyphens or symbols), but for names like "students" there's no need.
Example:

for (var key in data.students) {

(note that this is using the original data variable you started with)

An easy second thing is semicolons. Control structures, like for loops, don't need semicolons after the body.

  • Thanks 1
Link to comment
Share on other sites

I would make students[modules] an array of module objects instead of an associative array with numbers in quotes.

var data = {
    "students": [
        {
            "name": "Eric Smith",
            "modules": [
                {
                    "id": "COMP40003",
                    "name": "Software Development",
                    "result": 80
                },
                {
                    "id": "COMP40001",
                    "name": "Digital technologies",
                    "result": 71
                },
                {
                    "id": "COMP40004",
                    "name": "Web Development",
                    "result": 47
                },
                {
                    "id": "COMP40002",
                    "name": "Networking Concepts and Cyber Security",
                    "result": 0
                }
            ]
        },
        {
            "name": "Student Two",
            "modules": [
                {
                    "name": "Module 1",
                    "result": 44
                },
                {
                    "name": "Module 2",
                    "result": 5
                },
                {
                    "name": "Module 3",
                    "result": 34
                }
            ]
        }
    ]
};

And then loop through it using the native array function forEach()

data.students.forEach(function(i){
   console.log(i.name);
   console.log("======================");
   i.modules.forEach(function(j){
        console.log(j.name + " " + j.result);
   });
   console.log("======================");
});
Quote

Eric Smith
======================
Software Development 80
Digital technologies 71
Web Development 47
Networking Concepts and Cyber Security 0
======================
Student Two
======================
Module 1 44
Module 2 5
Module 3 34
======================

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.