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

welcome to webstylepress in this video we will  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 strings  numbers booleans null arrays objects data types   string number boolean null are simple  data types or primitive data types   whereas object and array are complex data types  json strings must be written in double quotes   numbers are 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  brackets and ends with ending square brackets   the values of arrays 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 comma in objects 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 you take every json data type   in json file and use each type of data  effectively in react.js this tutorial is important   you will also learn a lot about json json data  types using json data in react.js and more i have this json file in src folder its  name is records.json it's in src folder let's put data in it opening and closing square brackets inside this  array we can store objects with curly braces we have taken three objects inside this array each  object can have properties with key value pairs   we use double quotes in json and last property  in object does not have comma at the end for the first object we have got id this is number then we have got string this is image name and  this is our image then string boolean array another array and an object inside this array similarly data for second  object and data for third object   we stored images in directory named as  images images directory is in public folder   public images and we've got three images 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 so this is our json object containing  numbers strings booleans arrays objects and   null data types we have got null value  here for the third object we have got color   null for second we have got color yellow for first  object we have got color value blue and boolean   is visible is true right now in all three objects   we will change one to false and will  implement its logic in react.js as well   we do not need to export this json file in case  of javascript file we export that but this is   json file however we have to import this  json file in our react component to use it   this is main component for our project  import name this import records from records dot json inside component 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  and array mostly we only need value from these   parameters but index is also used sometimes  map returns a new array we can use a function   or arrow function as callback  on each element in array so here we will use this import  records and and records dot map   for each element inside records  we will assign a name record and here is arrow function and inside it will be return statement google return main div with unique key prop record dot id  record from here and id is this one   we used this id for this purpose then we will have our main tip with class name main and inside that i want to have content at the left  side and the content for right side so this is left side and this is right side  let's use some text here for the time being left this div needs closing left right left right so three records  left side content right side content   but before i render this main div i want to apply  a check here i want to check if is visible value   is true or false so we'll have a ternary  operator here or conditional operator here record dot is visible then this statement or else null and then this main div will be  inside this conditional operator save let's display one thing here try curl dot caption record is from here and caption is  this one this value we need this value   save icon 1 icon 2 icon 3 and now if i  want to hide this record second object   i can use false here and the  second object will be gone let's keep it true for time being so there we go okay this looks better now let's populate data for the left side at the left side i want caption   this image and then this color value  so caption icon and color caption id color we have got icon but icon is  image so it will be like img src and we will need art for the image break here line break here save and we have got icon one icon two icon  three one two three and the image as well let's make some of these bold that is better now for the right  side i want to display this data this array and these records so liked  by and details and details is an array   so we'll use map again here we have the record here record dot details and and  record dot details dot map details is this from the details for each element we will take  this name for the element and then arrow function return inside return let's use unordered list we have got width hide and type here again we will use unique key prop record dot id similar that we use here so detail dot width detail dot height detail dot type width height and type are here width height and type and after that let's print liked by similarly record dot liked by and and record liked by dot map name it has got name user names like user n  user e user j user a and here arrow function return there can be div or opening and closing  brackets but here now we need index as well   and now these are two so we will enclose these in  parentheses and here if we use name this one here we see output like this i want to separate   these values from array separated by comma  so for that we will use ternary operator we will check if index is not equal to  zero if index is something other than zero then display comma in other case do  not display anything just keep it empty   save and now we have got comma here and here these  values are comma separated now so that is that now   if i want to hide a record let's say third object  is visible can be false and third record gone true and third record appeared also see color  was null for third object so here color is not   being displayed and hair color was yellow for  second object and hair yellow is being displayed   and hair color is blue blue is  being displayed so there we have it inspect we need unique key prop here i guess so let's turn it into span and use same key here save it is giving me warning like encountered  two children with the same key   let's add something in it let's add index value and one to just make it unique you can better manage  unique key value prop by using specific   package from npm i can recommend uuid but i  am sure there are other solutions available   and when you work on a jail project  there you won't face such issue because   in real projects json is better  structured than this so okay so as i mentioned earlier about this image this is  record icon record is coming from here and icon is   here this one and it's got this path images and  then image name with extension and i mentioned   that images are in directory named as images that  is located inside public directory if you want to   display images from json file keep these images  in public directory also note 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 in react.js i have similar videos  related to react.js that might interest you if you go to my channel and search for react json you will find very important and interesting  tutorials related to this topic like fetch   data from json file and seven ways to use images  in react.js node react.js on records local crud   and many similar interesting tutorials okay i hope it helped like here subscribe  and i will see you in the next video

Channel: WebStylePress

Views: 16,184

Keywords: json data in react js, react display records from json, fetch data from json file in react js, react json, display json data in react, json react, json in react, React json tutorial, json, data, react js, react, javascript, map, array map, map inside map javascript, map inside map react js, js, react display records, temporary database for react, mapping object in react, react tutorial for beginners, react tutorial, json file, react map function, Fetch json data using javascript

Id: 8nkVXiGH-7I

Length: 20min 24sec (1224 seconds)

Published: Sat Feb 26 2022