Rajdeep Singh
Published in

Rajdeep Singh

How to access nested JSON object Inside Array in react js

Hey, Rajdeep Singh here. 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 use 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

--

--

--

Computer Science & Biology & Bioinformatic

Recommended from Medium

The Top React Native Features & Updates in 2020!

How To Make Twitter Follow Bot in DevTools Console

Creating a Converter app in JavaScript

Ten Most Important Methods and Functions in JavaScript

10 Things you should know about JavaScript

JS Currying Function Basic to Advance

Unsubscribe a Subscription with Angular in 5 ways

How to Add Authentication to a Vue.js App Using AWS Amplify

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/

More from Medium

Mock Service -React Testing lib — MSW | React unit testing

How choose a JS framework

From Stack Overflow trends

Handle Refresh Tokens with Axios

JavaScript, NoSQL and MongoDB