FrontEnd web
Published in

FrontEnd web

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.

How to access nested JSON object Inside Array in react js

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

Nested JSON object Inside Array in react js

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....
}
TypeError

Code for play

nested JSON object Inside Array in react js

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/