How to target Nested Objects from a JSON data file in React ?
Last Updated :
05 Apr, 2024
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": "geeksforgeeks.org"
};
const city = person.address.city;
console.log("City:", city);
// Outputs: City: NoidaThere are two main ways to target nested objects from a JSON data file:
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.
JavaScript
import React from 'react'
const NestedObjectExample = () => {
// Sample JSON data
const jsonData = {
person: {
name: 'Geeks',
address: {
street: 'Sector 136 Noida',
city: 'Noida',
zipcode: '201310'
},
email: 'geeksforgeeks.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:
Bracket Notation for Dynamic Keys and Arrays
Bracket notation in JavaScript allows for dynamic access to object properties and array elements using variables or expressions within square brackets ( [ ] ). This is particularly useful when dealing with dynamic keys or indices in JSON data structures, enabling flexible and dynamic data manipulation in your code.
Example : This is another example to showcase for dynamic keys and Arryas.
JavaScript
import React from 'react'
const DynamicKeysAndArraysExample = () => {
// Sample JSON data
const jsonData = {
person: {
name: 'geeks',
address: {
street: 'Sector 136 Noida',
city: 'Noida',
zipcode: '201310'
},
email: 'geeksforgeeks.org'
},
fruits: ['apple', 'banana', 'orange']
}
// Define dynamic keys and array index
const key = 'person'
const index = 1
// Access nested object with
// dynamic key and array element
const dynamicObject = jsonData[key]
const dynamicProperty = dynamicObject.address.city
const arrayElement = jsonData.fruits[index]
return (
<div>
<h2>Dynamic Property: {dynamicProperty}</h2>
<h2>Array Element: {arrayElement}</h2>
</div>
)
}
export default DynamicKeysAndArraysExample
Output:
Example 2: This example shows fetching json data from an API and then accessing data.
JavaScript
import React, { useState, useEffect } from 'react'
const NestedObjectExample = () => {
const [city, setCity] = useState('')
useEffect(() => {
// Fetch JSON data from the file
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then((data) => {
// Access nested object using dot notation
const cityName = data[0].address.city
setCity(cityName)
})
.catch((error) =>
console.error('Error fetching data:', error))
}, [])
return (
<div>
<h1>City Name:</h1>
<p>{city}</p>
</div>
)
}
export default NestedObjectExample
Output:
Similar Reads
How to fetch data from a local JSON file in React Native ? Fetching JSON (JavaScript Object Notation) data in React Native from Local (E.g. IOS/Android storage) is different from fetching JSON data from a server (using Fetch or Axios). It requires Storage permission for APP and a Library to provide Native filesystem access.Implementation: Now let’s start wi
3 min read
How to Load Data from a File in Next.js? Loading Data from files consists of using client-side techniques to read and process files in a Next.js application. In this article, we will explore a practical demonstration of Load Data from a File in Next.js. We will load a validated CSV input file and display its contents in tabular format. App
3 min read
How to load a JSON object from a file with ajax? Loading a JSON object from a file using AJAX involves leveraging XMLHttpRequest (XHR) or Fetch API to request data from a server-side file asynchronously. By specifying the file's URL and handling the response appropriately, developers can seamlessly integrate JSON data into their web applications.
3 min read
How to access nested object in ReactJS ? To access a nested object in react we can use the dot notation. But if we want to access an object with multi-level nesting we have to use recursion to get the values out of it. PrerequisitesReact JS NPM & Node.jsJavaScript ObjectApproachThe structure of an object in React JS can be nested many
2 min read
How to Filter Nested Object in Lodash? Lodash is a popular JavaScript utility library that simplifies common tasks like manipulating arrays, objects, strings, and more. In this tutorial, we will explore how to filter nested objects using Lodash's _.filter() and _.get() methods. This technique is useful when we need to filter data, such a
2 min read
How to Access and Process Nested Objects, Arrays, or JSON? Working with nested objects, arrays, or JSON in JavaScript involves traversing through multiple levels of data. Here are some effective ways to access and process nested data1. Using Dot Notation and Bracket Notation – Most CommonDot notation is commonly used for direct access, while bracket notatio
3 min read