How to access an Array of Objects using TypeScript or JavaScript.

TypeScript and JavaScript are similar in many ways. That is because TypeScript is a newer computer language — a superset of JavaScript — developed and maintained by Microsoft in just the last couple of years. TypeScript has gained popularity and surfaced rather quickly thanks to popular frameworks like Angular 2 and Vue.js. In this article, I’ll discuss arrays and objects.

There are two major types of arrays: indexed array and associative array. An “indexed” array is one where the index must be an integer, and you access its elements using its index as a reference.

Here’s an example of an indexed array:

let pets_1 = ["cat", "dog", "mouse"];

let pets_1 = ["cat", "dog", "mouse"];

When declaring an indexed array, you don’t have to concern about the index. By default, the index will always start at “0”. To access the array’s elements, you use the index as follows:

pets_1[0]; //cat
pets_1[1]; //dog
pets_1[2]; //mouse

xxxxxxxxxx

pets_1[0]; //cat

pets_1[1]; //dog

pets_1[2]; //mouse

Now, let’s see how pets_1 looks like as an object. Object is similar to the indexed array; it’s often referred to as an associative array. So the above indexed array can be rewritten into an object as follows:

let pets_2 = {0:"cat", 1:"dog", 2:"mouse"};

xxxxxxxxxx

let pets_2 = {0:"cat", 1:"dog", 2:"mouse"};

Notice the curly braces — that’s the main distinction between an array and an object. The variable pets_2 is an object. Inside each pair of { } is a key:value pair (also called property:value or sometimes just property). Our example has three properties named 0, 1, & 2 (not meaningful yet but just for illustration purposes).

To access these properties of the pets_2 object, you can reference them exactly the same way as the indexed array:

pets_2[0]; //cat
pets_2[1]; //dog
pets_2[2]; //mouse

xxxxxxxxxx

pets_2[0]; //cat

pets_2[1]; //dog

pets_2[2]; //mouse

See the similarities? The reason why this works is because the “keys” are numeric, thus it’s identical to the indexed array. You can also reference its index as a string by wrapping the index with quotes like this:

pets_2["0"]; //cat
pets_2["1"]; //dog
pets_2["2"]; //mouse

xxxxxxxxxx

pets_2["0"]; //cat

pets_2["1"]; //dog

pets_2["2"]; //mouse

But objects are pretty cool because you don’t have to use numbers for these indexes (or keys). You can use strings or words like this:

let pets_3= {prop1:"cat", prop2:"dog", "prop3":"mouse"};

xxxxxxxxxx

let pets_3= {prop1:"cat", prop2:"dog", "prop3":"mouse"};

Now these properties can be accessed the same way as with the indexed array:

pets_3["prop1"]; //cat
pets_3["prop2"]; //dog
pets_3["prop3"]; //mouse

xxxxxxxxxx

pets_3["prop1"]; //cat

pets_3["prop2"]; //dog

pets_3["prop3"]; //mouse

Still with me?

Because they’re properties of an object, you can also use the “.” (dot) notation to access them like this:

pets_3.prop1; //cat
pets_3.prop2; //dog
pets_3.prop3; //mouse

xxxxxxxxxx

pets_3.prop1; //cat

pets_3.prop2; //dog

pets_3.prop3; //mouse

Pretty cool, huh? There’s just two golden rules about objects and the dot notation — in order for the “.” notation to work, the key must NOT start with a number.

Golden Rule #1: Any key that starts with a number must be a string

The following won’t work.

// This is a syntax error — 2abc is invalid.
let pets_4 = {1:"cat", 2abc:"dog", "3y3":"mouse"}; 

xxxxxxxxxx

// This is a syntax error — 2abc is invalid.

let pets_4 = {1:"cat", 2abc:"dog", "3y3":"mouse"}; 

Here’s the correct way:

let pets_4 = {1:"cat", "2abc":"dog", "3y3":"mouse"};

xxxxxxxxxx

let pets_4 = {1:"cat", "2abc":"dog", "3y3":"mouse"};

Golden Rule #2: Any key that starts with a number cannot be chained using the dot notation.

The following won’t work:

pets_4.1; // Error
pets_4.2abc; // Error
pets_4.3y3; //Error

xxxxxxxxxx

pets_4.1; // Error

pets_4.2abc; // Error

pets_4.3y3; //Error

The correct way:

pets_4["1"];
pets_4["2abc"];
pets_4["3y3"];

xxxxxxxxxx

pets_4["1"];

pets_4["2abc"];

pets_4["3y3"];

With this in mind, now let’s look at an Array of Objects:

let pets_5 = [{prop1:"cat", prop2:"dog", prop3:"mouse"}];

xxxxxxxxxx

let pets_5 = [{prop1:"cat", prop2:"dog", prop3:"mouse"}];

​

Now, pets_5 is an Array of Objects. The array has only 1 element and the element is the object (denoted by the pair of curly braces “{ }”) containing three properties.

To get these values, you access them like this:

pets_5[0]["prop1"]; //cat
pets_5[0]["prop2"]; //dog
pets_5[0]["prop3"]; //mouse

xxxxxxxxxx

pets_5[0]["prop1"]; //cat

pets_5[0]["prop2"]; //dog

pets_5[0]["prop3"]; //mouse

The index “0” is used because there’s only one element in the array. The second bracket is the property of the object which you can access like an array index. You can also access them using the dot notation as follows:

pets_5[0].prop1; //cat
pets_5[0].prop2; //dog
pets_5[0].prop3; //mouse

xxxxxxxxxx

pets_5[0].prop1; //cat

pets_5[0].prop2; //dog

pets_5[0].prop3; //mouse

Still with me?

Now, let’s add a second element to the array:

var pets_5 = [
{ prop1 : "cat", prop2:"dog", prop3:"mouse" } ,
{ prop1 : "apple", prop2:"banana", prop3:"cherry" }
];

xxxxxxxxxx

var pets_5 = [

{ prop1 : "cat", prop2:"dog", prop3:"mouse" } ,

{ prop1 : "apple", prop2:"banana", prop3:"cherry" }

];

To access these data using the dot notation:

The first element: index 0

pets[0].prop1; //cat
pets[0].prop2; //dog
pets[0].prop3; //mouse

xxxxxxxxxx

pets[0].prop1; //cat

pets[0].prop2; //dog

pets[0].prop3; //mouse

The second element: index 1

pets[1].prop1; //apple
pets[1].prop2; //banana
pets[1].prop3; //cherry

xxxxxxxxxx

pets[1].prop1; //apple

pets[1].prop2; //banana

pets[1].prop3; //cherry

See it now? Try nesting another array of objects in the object like this:

var pets_6 = [
  {prop1:"cat", prop2:"dog", prop3:"mouse"} ,
  {prop1:"apple", prop2 : "banana", prop3:"cherry"} ,
  {prop1:[{name:"Henry", age:2, breed:"Poodle"}]}
];

xxxxxxxxxx

var pets_6 = [

  {prop1:"cat", prop2:"dog", prop3:"mouse"} ,

  {prop1:"apple", prop2 : "banana", prop3:"cherry"} ,

  {prop1:[{name:"Henry", age:2, breed:"Poodle"}]}

];

This can get tricky, but once you understood how to structure them correctly you can easily traverse through the array and objects using their indexes or keys.