How to access nested JSON object Inside Array in react js

In the post, I’m telling you How to access nested JSON objects Inside Array in react.js with easy steps.

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data-interchange format for Javascript. It is primarily used for transmitting data between a web application and a server. It is easy for humans to read and write with a simple Text Editor.

More Info about JSON

Codesandbox Demo

Let Start it

1. Create app
2. Import File
3. map() function

Create app:

Firstly Create react app using npm command: npx create-react-app my-app

Import File:

After creating a JSON file in the react.js src folder and import the work folder use the javascript file import method.

import data from “./data.json”;

map() function:

use javascript map() function get data into JSON file.But when writing your JSON file, start with array format.

Array JSON Format ✔️

[
  {
    "userId": 1,
    "id": 1,
    "title": " How to Shape of Character Design"
   }
]

Note: Make sure to use map() or other array methods

data.map((postData) => {
    // play here....
}

Object JSON Format ✖️

  {
    "userId": 1,
    "id": 1,
    "title": " How to Shape of Character Design"
   }

Note: When use map() function in Object JSON Format show TypeError in The browser.But don’t very use Object.entries() in this case.

Object.entries(data).map((postData) => {
    // basic mean convert to array play here.... 
}

Code for play

Read On My Blog:

Read Locally txt File Use Fetch Method In JavaScript

My Stuff on Medium:

Reference:

• https://www.json.org/json-en.html
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
• https://www.w3schools.com/jsref/jsref_map.asp

Conclusion:

I hope you understand How to access the nested JSON object Inside Array in reactjs. Suppose there are Any queries, mistakes, and Suggestions. Plz, tell me in the comment box after we update our article.

Contact me:

• https://www.facebook.com/officialrajdeepsingh/
• https://www.officialrajdeepsingh.dev/
• https://www.facebook.com/groups/JavaScriptcode/
• https://www.facebook.com/groups/pythoncodejoin/
• [email protected]

Thanks for Reading