05: Javascript Objects vs JSON

Javascript Objects

Javascript objects are more complex data types that consist of name / value pairs. They are created with {…} syntax with the name separated from the value with a colon :. For example:

var myObject = { name : "Martin" };

Objects can contain many name:value pairs separated by commas such as:

var myObject = { name : "Martin", email: "myemail@company.com"};

Objects can be accessed for debugging with console.dir eg:

var myObject = { name : "Martin", email: "myemail@company.com"};
console.dir(myObject);

The 'name' in the name/value pair are not quoted. The value can be Javascript values such as strings, integers, floats, Booleans but also arrays and other objects eg:

var bobDetails = {
   name : 'Bob',
   age : 21,
   qualifications: {
   gsce : true,
   alevels : true,
   degree : false
   }
}
console.dir(bobDetails);

Javascript Objects can also have methods – that is a value can be function eg:

var bobDetails = {
   name : 'Bob',
   age : 21,
   getInfo : function(){
   return this.name + " " + this.age;
   }
}
console.info(bobDetails.getInfo);

It is also common to have an array of objects, with each array item been an object eg:

var qualifications = [
{
   subject : "Maths",
   grade : "A"
},
{
   subject : "English",
   grade : "B"
}, 
{
   subject : "French",
   grade : "C"
},
{
   subject : "Physics",
   grade : "B"

}
];

These can be looped around various ways. One technique is to use the forEach() method that extracts each array element eg:

qualifications.forEach(function(element) {
console.dir(element);
});

If each element of the array is an object then its value of the name:value pairs can be extracted with dot notation eg:

qualifications.forEach(function(element) {
console.info(element.subject);
console.info(element.grade);
});

Javascript Objects vs JSON

Previously in this tutorial we've made use of Javascript Objects. Javascript Objects are related to a data format known as Javascript Object Notation (JSON).

The JSON format is massively popular way of moving data between applications.

JSON differs from Javascript Objects in that 'names' in the name:value pair should be in double quotes. Also, unlike Javascript Objects, JSON values cannot be functions, so they cannot have methods.

Setting up the HTML Page and JS file

In this next section of the tutorial, we'll will see show how to use the fetch API to load data from a JSON file and populate it into an HTML table. Open the file staffList.html. Notice there is the shell of a table but it lacks rows.

<table>
   <thead>
         <tr>
             <th>Name</th>
             <th>Email</th>
         </tr>
   </thead>
   <tbody id="staffTable"></tbody>
</table>

Create a js file of js/staff.js to hold the logic. Use an IIFE (Immediately Invoked Function Expression), enclosing the entire code as follows:

(() => {
console.info("ready");
})();

Attach the js file to the HTML as we did in the previous example ie:

<script src="js/staff.js" defer></script>

The JSON Data File is located at data/staff.json. Notice how the data is structured as an array of objects.