Object.map is not a function || How to map Object in Js, React Native, React || Map Large arrays

hello guys welcome to the debug arena in this video i am going to teach you how can you use map very efficiently and solve all the errors that are based on map within no time so let's get started as you can see here this is a basic react.js project and it is currently returning nothing just a learning map so first things first what is a map map is a method that helps you to iterate over an array for example suppose you have an array and you want each data of array one by one so the first approach is that you will use for loop in for loop you have to initialize the variable after that give condition for how many time that loop should be done and at last you have to increment that variable but with the use of map you can do all this in just one line so let's see this with the help of example here you can see i have taken an array name the simple array in that there is nothing but some data so let's iterate over it [Music] using map so as you can see to apply map you have to just write the name of an array you want to iterate and after that dot map in map you can pass three uh parameters like value numbers and one array method callback function so here i will be returning in arrow function and inside that i will be consoling the data as you can see okay [Music] let's save this and in console you can see here so you can see i am getting data one by one now let's in this way uh you can use map on an array now let's apply this map on that variable which is storing string when you do that you will get an array error sorry error here you can see and it is telling us that name dot map is not a function so you have to always remember that map is a method which should be applied on array only yeah it works on object also but mostly it should be applied on array you cannot use it on different data types so keep that in mind so let's get ahead with an another example now let's take a little complex array so you can see i have taken this array named array with object in this each element of the array is an object so here we have to access that value inside that object so there is an array inside that there is an object and inside the object there is a value we have to access so now i will show you how can you get the value from the nested array and objects so first you have to map this array and save it and you can see i am getting the values of the array color value color value color value now what if i want this color value so you have to just write when you are in this x you are getting all these value means all this a single value now when you have to access this color you have to just add x dot color and when you hit save you can see i am getting only the color value in the same way if you want value you can just write value and you will get value so this type of method is used when [Music] fetching a large amount of data suppose uh you are you are creating an array with the name user and inside the user there are username first name last name and you have to access that in that case you can use this method to access that data now moving forward let's take an object and try map with that yes earlier i had told you that we cannot use map and object but let's see what will happen if we do so as you can see i have taken an object so object is a collection of a key and the value type and array is of a collection of data so you have to differentiate between them as you can see here there is a key name id and it has a value so this is object now let's map this so you can see i tried this [Music] you can see i am getting added and this error is same as that name dot map is not a function function so if it is not an array then it will give you error so how can you do that this is happening because in object there are keys and the values so the javascript doesn't know oh that you want to iterate over which whether you want to iterate over key whether you want to iterate over pair or you want to vote so what you can do in this case you can do just like this you can just write object dot and you will get many things just you can try with values and inside value just pass the object [Music] and then you can map over this [Music] now what i'm doing i'm just taking the object not just object the values of the object not key only values now when i hit save you can see i am getting the values of an object you can see that the id is key and the value 0 0 1 do not keep so in this way you can iterate over object also now in the place of values you can write keys to this and then you will get all the keys here otherwise you can write n trace and you will get both in the form of array so in this way you can iterate over use map over an object [Music] now let's iterate over this big array and show that data onto your web screen yes by using map you can not only just show it in console or in back end but you in the front end also so let's do this data dot map [Music] now here i will be writing the structure of the code like in h1 suppose in h1 i have to show the id so how can you be that yes just like this access with the dot and it will show you whatever the data between data will be available like when i write x dot it will showing me email first name general and when i hit save you can see here i am getting the data in my gui [Music] now you can use css to give styling to this data and your job is done so i had taught you how can you use a map with an array and with an object also how can you access the value inside array and object okay let me give you one more example little quick let me copy this and delete all these and inside the first name i am just pasting it so you can see there is an array name big data inside that there is an object and inside object there is an another object on the first name so how can you access that so you have to just map over big data so now inspect it and you can see an object here and here our data is coming yes this is [Music] the same data as you can see the last name is same last name is this yeah so now what if we we want to access the name which is inside the first name which is the name of the object which is inside the first name so how can you do that so let's just follow the hierarchy you have to write x dot first name we are writing first name because it contains the another object and you can see now we are getting access to the another object and here i want to access that this first name so now you have to just write exact first name and now again follow the hierarchy just for first name and just save it and you are getting this value in this way you can get data from any hierarchy or any nested elements arrays and objects so that's it for this video if you find this video helpful then please like share subscribe thank you [Music] you

Channel: The Debug Arena

Views: 24,764

Keywords: How to use map in javascript, how to use map in react, map in react js, map in react native, how to access data from nested arrays and objects, how to map objects, object.map is not a function, map errors, map lage arrays, javascript, react native, learn react, array and objects, errors regarding map, Javascript array methods, Javascript map function, React map function, solve error in react, youtube search, learn programming, web development

Id: jcLW2tVsZis

Length: 9min 24sec (564 seconds)

Published: Tue Feb 22 2022