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

How to display all types of JSON data in React JS. JSON (JavaScript Object Notation) is most widely used data format for data interchange on the web. JSON is a lightweight text based, data-interchange format and it is completely language independent. It is based on subset of the JavaScript programming language and it is easy to understand and generate.
A JSON object can have following JSON Data Types:
- String
- Number
- Boolean
- Null
- Arrays
- Objects
String, number, boolean, null are Simple Data Types or Primitives Data Types whereas Objects and Arrays are Complex Data Types.
- JSON strings must be written in double quotes.
- Number is self explanatory.
- Boolean data type can be either true or false.
- Value Null represents the intentional absence of any object value.
- Array is an ordered collection of values and begins with opening square bracket and ends with ending square bracket. The values of array are separated by comma.
- Object is a set of name or value pairs inserted between curly braces. The keys must be strings and should be unique and multiple key and value pairs are separated by a comma.
We will use every JSON data type in JSON file and display that data inside React JS. We have published tutorial on how to display records from JSON file in React JS. How to display images from JSON file in React JS. I want to expand on this topic further. I want to show you how can we take every JSON data type in JSON file and use each type of data effectively in React JS. You will learn a lot about JSON, JSON data types, using JSON data in React JS and more.
I have a JSON file in src folder of React JS project. We used opening and closing square brackets. Inside this array, we can store objects with curly braces. We took three objects. Each object can have properties with key value pairs. We use double quotes in JSON for the keys. And last property in object does not have comma at the end.
We stored images in directory named as images. Images directory is in public folder. If you keep images in public folder, you can use images paths in JSON file. And then images do not have to use require in React JS component.
We have JSON object containing numbers, strings, boolean values, arrays, objects and null data types. We do not need to export this JSON file. In case of JavaScript file, we export that. But not JSON file. However we have to import this JSON file in our React component. Name this import in React JS component and import it. We named it Records.
Inside React JS component's return statement, we use JavaScript map method on JSON object import. JavaScript Map method, maps each item in array to something else. Map takes a callback function that can have three parameters (value, index, array). We will need only value here. Map will return a new Array. We can use a function or arrow function as callback on each element in array.
Boolean value (true, false) can be used to display or hide stuff in React JS. Null value can be used if you don't want to display it in React JS.
Images are coming from JSON file. Image paths are defined in JSON file. So where is this images directory or where are these images located. Inside Public directory, we have images folder containing these images. If you want to display images from JSON file, keep these images in public directory. Also notice that for image tag we did not use require for image. Require image may not work here where images are defined in JSON file and are being loaded from public directory.
So this is how we display all type of data from JSON file in React JS. I have similar videos related to React JS that might interest you. If you go to channel and search for 'react json', you will find very important and interesting tutorials related to the topic.
Fetch Data from JSON File in React JS | React JSON
• Fetch Data from JSON F...
7 Ways to use Images in React JS
• 7 Ways to Use Images i...
Easy Way to use Images in React JS | No Import | No Require
• Easy Way to Use Images...
Require Image Not Working in React JS
• Require Image Not Work...
Multiple Images in One Import
• Multiple Images in ONE...
Multiple Sets of Images from One Import in React JS
• Multiple Sets of Image...
Display Records or Data from JSON File in React JS
• Display Records or Dat...
Default Map is not a Function in React JS
• Default MAP is Not a F...
Async Await Fetch in React JS
• Multiple Ways of Async...
ReactJS Playground
• ReactJS Playground
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: / webstylepress
Website: www.webstylepr...
FaceBook: / webstylepress
Twitter: / webstylepress
GitHub: github.com/web...
#WebStylePress #JSON #ReactJS #JavaScript #JS

[@techdockerz]

Thanks buddy for your Video Tutorial, its perfect or beginners to understand the json object to display. i would like to use MUI, how the same JSON Data can be display in MUI Table. More over MUI needs Rows and Columns if we can extract the columns and rows as per our needs from JSON Data and store in Rows and Columns to pass MUI Table it will be great. if you can please help us.

[@osamaabudan1655]

Thanks a lot, that helped me pretty much :)

[@bunyameennurudeen173]

Thanks Dev.
This is awesome and very educative but what of in a situation whereby there's a pure objects in the array like having a sub object as we have for array.
Example:- languages: {
ara: "Arabic"
},
which are different across the three items.
Thanks

[@TheVinisoares2]

Thank you so much!!!!

[@GagandeepSingh-cy8jp]

what if we want to fetch data from an object json instead of array json???
using maps it is throwing error!!!

[@santhanaselvi6]

Can you figure out how to fetch data from object json