Targeting Nested Objects with Dot Notation
Targeting nested objects from a JSON data file using dot notation involves specifying the path to the desired property by chaining object keys with dots. For example, accessing a property like ‘person.address.city’ targets the ‘city’ property within the nested ‘address’ object of the ‘person’ object. This approach simplifies navigation through nested structures and facilitates direct access to specific values within the JSON data.
Example: This example shows the targeting objects using dot notation.
import React from 'react'
const NestedObjectExample = () => {
// Sample JSON data
const jsonData = {
person: {
name: 'Geeks',
address: {
street: 'Sector 136 Noida',
city: 'Noida',
zipcode: '201310'
},
email: 'w3wiki.org'
}
}
// Access nested object using dot notation
const cityName = jsonData.person.address.city
return (
<div>
<h1>City Name:</h1>
<p>{cityName}</p>
</div>
)
}
export default NestedObjectExample
Output:
How to target Nested Objects from a JSON data file in React ?
Accessing nested JSON objects is similar to accessing nested arrays. Suppose we have a JSON object called person with a nested object ‘address' , and we want to access the ‘city' property from the address object. We can do this using dot notation like person.address.city. This notation allows us to directly access properties of nested objects within the JSON structure.
Example:
const person = {
"name": "Geeks",
"address": {
"street": "Sector 136 Noida",
"city": "Noida",
"zipcode": "201310"
},
"email": "w3wiki.org"
};
const city = person.address.city;
console.log("City:", city);
// Outputs: City: Noida
There are two main ways to target nested objects from a JSON data file:
Table of Content
- Targeting Nested Objects with Dot Notation
- Bracket Notation for Dynamic Keys and Arrays
Contact Us