Скачать или смотреть Fetch Individual Records from JSON File (No MAP) | JSON Data in React JS Tutorial

Fetch individual records from JSON File without using MAP method in React JS. JavaScript map method creates a new array from calling a function for every element in array. In our previous videos on how to display records from JSON file in React JS, we used JavaScript map method to display records from JSON file. This video is about how to access JSON records without using JavaScript MAP method. Here is how to display JSON records in React JS app without using map method.

In JSON file, use array and objects. Give objects properties containing key value pairs. We have nested objects in JSON file. We are not using map method, not iterating through JSON file, not looping through it. This is why I have not used id for any object. To use JSON data, import JSON file in React JS component by using any name. Console log records before return to see what we have in JSON file. Don't console log in JSX.

Array from JSON file, containing two objects or items with their index being displayed will be available. Array items can be accessed by using index. Item at zero index has 'address' and 'name' properties in our JSON file. Address has city and geo in it. Geo has got more properties. Item at index 1 has age, designation and website.

We have named our array 'Records'. At it's zero index we have property name. We can use index in array to get and display records. This is how to directly use array index and properties names to display records individually from JSON file without using JavaScript MAP method. It's just JSON file with array and object. So just use it like you use Array and objects in JavaScript.

If you are interested in topics like json file, json data, json react, react js, react json, fetch js, react js tutorial, reactjs, json, react json, json data, json data in react js, json server follow webstylepress for more.

Fetch All Types of Data from JSON File in React JS | React JSON Tutorial
   • Fetch All Types of Data from JSON File in ...  

Fetch Data from JSON File in React JS | React JSON | [ UPDATED ]
   • Fetch Data from JSON File in React JS | Re...  

7 Ways to use Images in React JS
   • 7 Ways to Use Images in ReactJS | React Im...  

Easy Way to use Images in React JS | No Import | No Require
   • Easy Way to Use Images in React JS (No Imp...  

Require Image Not Working in React JS
   • Require Image Not Working in ReactJS | Ima...  

Multiple Images in One Import
   • Multiple Images in ONE IMPORT | ReactJS Tu...  

Multiple Sets of Images from One Import in React JS
   • Multiple Sets of Images from ONE IMPORT | ...  

Display Records or Data from JSON File in React JS
   • Display Data from JSON File in React JS  

Default Map is not a Function in React JS
   • Default MAP is Not a Function | React JS T...  

Async Await Fetch in React JS
   • Async Await Fetch Data from API in React J...  

Display Icons / Images in React JS | React JSON Tutorial
   • Display Icons / Images from JSON File in R...  

ReactJS Playground
   • ReactJS Playground  

Also check out how to use react js and node js to create, update, edit, delete records from a local JSON file. Full CRUD operation by using JSON file as a database in ReactJS.
   • React JS & Node JS Local JSON File CRUD App  

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

Channel:    / webstylepress  
Website: https://www.webstylepress.com
FaceBook:   / webstylepress  
Twitter:   / webstylepress  
GitHub: https://github.com/webstylepress
#JSON #JS #ReactJS #JavaScript #React #JsonReact #JSONFile #JSONData #JSONServer #WebStylePress #webdevelopment