Arrays and Objects

Creating An Array of Arrays

Because an array can contain any data type, it is common to have an array contain other arrays. This is known as an ARRAY OF ARRAYS or a multi-dimensional array.

1. Write the following code below the last console.log statement:
   
   

   console.log(myFamilyArray[1]);
   /* An Array of Arrays --------------------------- */
   var myFamilyArrayOfArrays = [["Cornelius", "Instructor"],["Sheila", "Manager"],["Joshua", "Student"],["Josiah", "Student"]]
   console.log(myFamilyArrayOfArrays);

2. CHECK POINT: Save the file and preview it in Chrome. Then, open the Developer Tool Console panel (CTRL+SHIFT+I). You should see the following in the panel:
   
   

Accessing An Array Of Arrays Value

You access an array of arrays by its INDEX NUMBER of BOTH of the arrays.

1. Write the following code below the last console.log statement:
   
   

   console.log(myFamilyArrayOfArrays);
   console.log(myFamilyArrayOfArrays[0][1]);

2. CHECK POINT: Save the file and preview it in Chrome. Then, open the Developer Tool Console panel (CTRL+SHIFT+I). You should see the Instructor in the panel because it has a myFamilyArray index 0 and index 1 of that element.

Creating An Object

While arrays use square brackets ([....]), objects use curly braces ({.....}) with name/value pairs separated by colons. This is called a JavaScript object.

1. Write the following code below the last console.log statement:
   
   

   console.log(myFamilyArrayOfArrays[0][1]);
   /* An Object --------------------  */
   var myEmployee  = {firstName: "Cornelius", 
   lastName: "Chopin", title: "Instructor"
   };
   console.log(myEmployee);
   

2. CHECK POINT: Save the file and preview it in Chrome. Then, open the Developer Tool Console panel (CTRL+SHIFT+I). You should see the following in the panel:
   
   

Accessing An Object Value

You access an object by its PROPERTY NAME instead of an index number.

1. Write the following below the last console.log statement:
   
   

   console.log(myEmployee);
   console.log(myEmployee.firstName);

2. CHECK POINT: Save the file and preview it in Chrome. Then, open the Developer Tool Console panel (CTRL+SHIFT+I). You should see Cornelius in the panel because it is the firstName property.
   

Creating Objects In An Object

Like arrays, you can put an object or objects in an object.

1. Write the following h1 and h2 tag in the body of the document below the h1 tag
   
   

   <h1>Arrays and Objects Examples</h1>
   <h2 id="object_in_object"></h2>

2. Write the following below the last console.log statement:
   
   

   console.log(myEmployee.firstName);
   myObject = {
       "name":"Cornelius",
       "title":"App Developer",
       "apps": {
           "app1":"Chopinisms",
           "app2":"Thinking Inside The Box",
           "app3":"Learning Scriptures Made Easy"
       }
   }
   console.log(myObject);
   document.getElementById("object_in_object").innerHTML += myObject.apps.app2 + "<br>";
   // or 
   document.getElementById("object_in_object").innerHTML += myObject.apps["app2"];

3. CHECK POINT: Save the file and preview it in Chrome. You should see the phrase "Thinking Inside The Box displayed twice. Then, open the Developer Tool Console panel (CTRL+SHIFT+I). You should see the following in the panel:
   

Accessing An Object In An Object Value

1. Write the following below the last document.getElementById statement:
   
   

   document.getElementById("object_in_object").innerHTML += myObject.apps["app2"];
   console.log(myObject.apps.app3);

   
   
2. CHECK POINT: Save the file and preview it in Chrome. Then, open the Developer Tool Console panel (CTRL+SHIFT+I). You should see the Learning Scriptures Made Easy in the panel because that is the object's object property.

Creating An Array of Objects

Once you have learned how to create an array and an object and how to acess an array of arrays, let's turn our attention to a common technique that is a hybrid of the two types: An ARRAY OF OBJECTS.

• Write the following code below the last code:
  
  

  /* An Array of Objects --------------------------- */
  var myFamilyArrayOfObjects = [
  {name:"Cornelius", title:"Instructor", gender:"male"},
  {name: "Sheila", title:"Manager", gender:"female"},
  {name: "Joshua", title:"Student", gender:"male"},
  {name:"Josiah", title:"Student", gender:"male"} ]
  console.log(myFamilyArrayOfObjects);
  

• CHECK POINT: Save the file and preview it in Chrome. Then, open the Developer Tool Console panel (CTRL+SHIFT+I). You should see the following in the panel.
  
  
  

Accessing An Array of Objects Value

You access an array of objects by the array INDEX by a access operator square brackets syntax AND the object PROPERTY by the dot syntax (object.property).

1. Write the following code below that last console.log statement:
   

   console.log(myFamilyArrayOfObjects);
   console.log(myFamilyArrayOfObjects[3].name);

2. CHECK POINT: Save the file and preview it in Chrome. Then, open the Developer Tool Console panel (CTRL+SHIFT+I). You should see the Josiah in the panel because that is the array index value AND the object property value.

Parsing A JSON Object

A JSON (JavaScript Object Notation) Object is very much similar to a JavaScript object; however, it differs in that it is a text string. You can parse an JSON Object and then "write" it to a page.

1. Write the following "p" tag in the body of the document below the last h1 tag:
   
   

   	<h2 id="object_in_object"></h2>
   	<p id="json_object"></p>

2. Write the following code below the last console.log statement:
   
   IMPORTANT NOTE: Notice the single and double quotes on the myJSON variable.
   
   

   console.log(myObject.apps.app2);
   /* Parsing A JSON OBJECT --------------------  */
   var myJSON = '{ "name":"Cornelius", "title":"Instructor", "city":"Rock Rock" }';
   var myObj = JSON.parse(myJSON);
   console.log(myJSON);
   document.getElementById("json_object").innerHTML = 
   "<strong>Name: </strong>" + myObj.name + "<br/>" + 
   "<strong>City: </strong>" + myObj.city + "<br/>" + 
   "<strong>Title: </strong>" + myObj.title;

3. CHECK POINT: Save the file and preview it in Chrome. Then, open the Developer Tool Console panel (CTRL+SHIFT+I). You should see the following on the page:
   
   Name: Cornelius
   City: Round Rock
   Title: Instructor
   

Parsing an XML Object

Write the following "p" tag in the body of the document below the last h1 tag:

1. Write the following "p" tag in the body of the document below the last "p" tag:
   
   

   <p id="json_object"></p>
   <p id="xml_object"></p>

   
   
2. Write the following code below the document.getElementById statement:
   
   

   document.getElementById("json_object").innerHTML = 
   "<strong>Name: </strong>" + myObj.name + "<br/>" + 
   "<strong>City: </strong>" + myObj.city + "<br/>" + 
   "<strong>Title: </strong>" + myObj.title;
   /* Parsing An XML OBJECT ---------------------- */
   var text = "<employees><employee>" +
   "<name>Cornelius Chopin</name>" +
   "<title>Accessibility Specialist</title>" +
   "<start_date>June 22, 2012</start_date>" +
   "</employee></employees>";
   
   var parser = new DOMParser();
   var xmlDoc = parser.parseFromString(text,"text/xml");
   
   document.getElementById("xml_object").innerHTML =
   "<strong>Name:</strong> " + xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue + "<br/>" + 
   "<strong>Title: </strong>" + xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue + "<br/>" +
   "<strong>Start Date: </strong>" + xmlDoc.getElementsByTagName("start_date")[0].childNodes[0].nodeValue;		

3. CHECK POINT: Save the file and preview it in Chrome. Then, open the Developer Tool Console panel (CTRL+SHIFT+I). You should see the following on the page:
   
   Name: Cornelius Chopin
   Title: Accessibility Specialist
   Start Date: June 22, 2012