How To Get Data From [Object Object]

In this tutorial, we will be discussing how to get data from an object in JavaScript. This is a common task when working with data that is typically in the JSON format.

We will be covering different methods to access this data, such as dot notation and bracket notation. By the end of this tutorial, you should be well-equipped to fetch various data properties from JavaScript objects.

Step 1: Define an Object

First and foremost, we need to define an object from which we want to fetch the data. In this tutorial, we will be using the following object:

{
    "name": "John Doe",
    "age": 35,
    "address": {
        "streetAddress": "21 2nd Street",
        "city": "New York",
        "state": "NY",
        "postalCode": "10021"
    }
}

Step 2: Use Dot Notation to Access Object Properties

We can use the dot notation to access properties in JavaScript objects. To do this, you simply follow the variable name with a period and the property’s name. Some examples are below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let person = {
    name: 'John Doe',
    age: 35,
    address: {
        streetAddress: '21 2nd Street',
        city: 'New York',
        state: 'NY',
        postalCode: '10021'
    }
};
 
console.log(person.name); // Output: "John Doe"
console.log(person.age); // Output: 35
console.log(person.address.state); // Output: "NY"

Step 3: Use Bracket Notation to Access Object Properties

Another way to access properties in a JavaScript object is by using bracket notation. To do this, you enclose the property name in square brackets and place them immediately after the object variable name. Here are some examples using the same person object:

1
2
3
console.log(person['name']); // Output: "John Doe"
console.log(person['age']); // Output: 35
console.log(person['address']['state']); // Output: "NY"

Bracket notation is especially helpful when you want to access properties with special characters in their names or access properties dynamically using a variable. For example:

1
2
3
4
5
6
let propertyName = 'name';
console.log(person[propertyName]); // Output: "John Doe"
 
let specialProperty = 'original-name';
person[specialProperty] = 'Jane Doe';
console.log(person[specialProperty]); // Output: "Jane Doe"

Full Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let person = {
    name: 'John Doe',
    age: 35,
    address: {
        streetAddress: '21 2nd Street',
        city: 'New York',
        state: 'NY',
        postalCode: '10021'
    }
};
 
// Using dot notation
console.log(person.name); // Output: "John Doe"
console.log(person.age); // Output: 35
console.log(person.address.state); // Output: "NY"
 
// Using bracket notation
console.log(person['name']); // Output: "John Doe"
console.log(person['age']); // Output: 35
console.log(person['address']['state']); // Output: "NY"
 
// Accessing properties dynamically and with special characters
let propertyName = 'name';
console.log(person[propertyName]); // Output: "John Doe"
 
let specialProperty = 'original-name';
person[specialProperty] = 'Jane Doe';
console.log(person[specialProperty]); // Output: "Jane Doe"

Conclusion

In this tutorial, we showed how to get data from JavaScript objects using both dot notation and bracket notation. These methods are fundamental when working with JSON data or accessing properties in JavaScript objects. With this knowledge, you should now be able to efficiently extract information from those objects.