JavaScript

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:

JavaScript

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:

JavaScript

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:

JavaScript

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 01, & 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:

JavaScript

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:

JavaScript

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:

JavaScript

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

JavaScript

Still with me?

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

JavaScript

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.

JavaScript

Here’s the correct way:

JavaScript

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

The following won’t work:

JavaScript

The correct way:

JavaScript

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

JavaScript

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:

JavaScript

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:

JavaScript

Still with me?

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

JavaScript

To access these data using the dot notation:

The first element: index 0

JavaScript

The second element: index 1

JavaScript

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

JavaScript

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.

Verified by MonsterInsights