Navigate back to the homepage

How to get specific data from json in reactjs?

Infinitbility
React
March 20th, 2022 · 1 min read
keep affilitate

Hi 👋,

Welcome To Infinitbility! ❤️

Today, we will learn to get specific data from JSON with example using objects, and an array of objects.

So, we are Going to learn to get specific data from 👇

Table of content

  1. React object example
  2. React array of the object example

React object example

To access any property of an object, we have to write the key of an object property.

As we know to create an object we need key and value pairs.

Let’s create sample object data and access any specific data like object.id. or object.name.

1import React, { useState, useEffect } from "react";
2import "./styles.css";
3
4export default function App() {
5 const [sampleObject, setSampleObject] = useState({});
6
7 useEffect(() => {
8 let sampleObject = {
9 id: 1,
10 name: "infinitbility"
11 };
12 setSampleObject(sampleObject);
13 }, []);
14
15 return (
16 <div className="App">
17 <h1>Hello {sampleObject.name}</h1>
18 <h2>Coding feels like fuel for my life!</h2>
19 </div>
20 );
21}

Here, we just create state and store when component mount, and in render, we access object data from the key.

Output

React, object, access, specific, object
React, Access specific data from object example

React array of object example

In this section, we will use a sample array and find a specific object from the array and store it in state and use it like above 👆.

1import React, { useState, useEffect } from "react";
2import "./styles.css";
3
4export default function App() {
5 const [sampleObject, setSampleObject] = useState({});
6
7 useEffect(() => {
8 let sampleArray = [
9 {
10 id: 1,
11 name: "infinitbility",
12 domain: "infinitbility.com"
13 },
14 {
15 id: 2,
16 name: "aGuideHub",
17 domain: "aguidehub.com"
18 }
19 ];
20 let sampleObject = sampleArray.find(e => e.id == 2);
21 setSampleObject(sampleObject);
22 }, []);
23
24 return (
25 <div className="App">
26 <h1>Hello {sampleObject.name}</h1>
27 <h2>Coding feels like fuel for my life!</h2>
28 </div>
29 );
30}

Here, find id 2 in array to specific data related aGuideHub and storing in the state.

React, array of object, access, specific, object
React, Access specific data from array of object example

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

melio affilitate

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

How to make a div scrollable in react js?

React, Learn to make scrollable div with vertically and horizontally using css.

March 19th, 2022 · 1 min read

How to use history in reactjs functional component?

React, use history for navigating in functional component.

March 13th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]