JavaScript JSON Array and JSON Object MP4

so the contents of this lecture so in this lecture we will discuss the following the arrays and json so under arrays we have the definition of array how to create an array and how to use an array for json we have the definition of json and examples of the json so let's go first to was it what is an array so javascript arrays are used to store multiple values in a single array or a single variable okay so you could think of an array in real life as a big box so this box could contain multiple objects inside so that's how array works so instead of doing this creating a variable for each cars so for example we have or i asked you to cr to declare a variable for this three cars here so i have volvo and bmw so that's that would give you car one so i have car two volvo and car three as bmw so we could just uh simply create an array so an array looks like this so it has a keyword var for declaring variables the name of the array which has cars and equal to so i'm going to say we're going to assign a value to cars and then inside the open and close square brackets are the values of volvo and bmw so i mean to say we have a collection of cars inside these cars okay so here's the syntax for an array var and then the array name which is cars is equal to i mean let's say we're going to assign a value to the array and then inside the square brackets are the items so it makes sense for using the square brackets it's like a box that contains these items or let's say collection of cars here okay so how are we going to do that let's go in our functionality.js so we have here the var then cars it's equal to so that's the first element separate by comma the next one is volvo then the third one is bmw so that's it and then you can also create an array and for then provide the elements so we could also assign a value to cars say for example we assign or we didn't assign a value to array cars because we don't know which cars to put in in our array yet so as we as time goes on uh for example we want to add a type of cars so we could just modify the elements of this cars array so you can also create an array and then provide the elements so cars 0 index 0 is equals to sab and then cars one index one is volvo and then cars two equal to bmw okay so those are the cars so the next one is what are these numbers inside the square brackets so these are what we call the index so the index defines the position of this elements okay so from our previous example all arrays it starts from the number zero and then to the right up to infinity okay so this sub here is from index zero default voice index one bmw is index two and so on say for example if we want to create another type of car so this would assign to three and then sample car not sure what kind of car is that so let's say it's sample car okay so how are we going to access this cars here okay so let's go back let's assign this inside our array to see how it works with the use of index okay so sab is index zero volvo is one bmw's two sample cars three so to check without using an element from our html we could use the console.log in order to print some values from our js file to our console say for example we want to print cars and then with index zero so this should display on the console of your web browser so let's check let's refresh this page okay so as the page loaded the window unload event would trigger and would load all of these variables and console that log function okay so once more then let's check the console console okay so it didn't display anything let's see so there's no error here i guess we didn't okay so there's no script tag here yet so that's why so src is equal to functionality.js and it should be a string okay so let's see let's try to refresh this one okay so sab so i'm going to say the index 0 or the first element of the course is sab next one is this should be volvo okay so if you wanted to um print all the cars so we could just before in variable x in cars okay so let's say what is x here let us print what is x so we know that cars is the collection of cars i have volvo bmw in sample car but what is x so let us print x okay so x here represents the car's index okay so in order for us to to use x we need to treat this as the index of cars inside the console.log so what we're going to do is to put cars inside the console.log and use as x as its index and once we refresh it we have the saab volvo bmw sample car so d4 in is used to iterate inside the cars so four in depends on the number of elements in the array so i'm going to say this for in would only run number of times depends on the number of cars so if there are four elements in cars this four in would execute this console.log here four times okay and then the x here represents the index of cars okay so here we use d4 in i hope that you understand how to use 4 in in our array okay let's move on so this is just assigning the uh the elements of the cars to another variable so that should be easy for you to understand now updating an array element so let's say i have this for loop here let me copy this and i want to change the first element of cars into lambo for example cars so what is the position of sab all positions or indexes starts with zero so i'm going to say i'm going to access the array at index 0 and replace it with a new one or a new element which is lambo okay so the original is a volvo bmw and sample car and then after this statement here line six the new collection is lambo volvo and bmw and sample car okay so that's for our array now let's move on to json so what is json so json stands for the javascript object notation it is an open standard file format and data interchange format that uses human readable text to store engines with data objects consisting of attribute value pairs and arrays so incrementing or creating a json we follow the some syntax rules so the data is in name value pairs so you could think of the json or the json format or notation as a dictionary wherein there's a name and value pair so what is this name value pair so the name in a dictionary for example that is the word and then the value is the definition of that word so that's why i told you that json is look like a a dictionary in programming okay we have the name which is the word and the value which is the definition of that word okay so it's a name value pair so the data is separated by commas just like in arrays we define each element and then each element is separated by a comma so curly braces hold objects something to say the elements inside the json which is called the objects are inside or enclosed inside the curly braces so compared to an array which is uses the square brackets to hold the array json objects and json arrays so json objects are written in inside the curly braces and objects can contain multiple name value pairs so here's an example definition or declaration of the object so my obj is equal to so open and close curly brace we have the first name and then what is the first name it's john separated by comma so i mean to say this is the first set of name value pair so once we access the first name it would give you the name of john and then we have the last name for this one last name is though okay so the example above has two properties or name first name and last name so to access the value in our object you have to specify the name the var object variable followed by a dot and then the name of property okay so let's try to use the console.log and then of course the name of the object the my obj so this is the name the object my obj and then it says here that it is followed by a dot so say dot and then the name that you want to access its value so the name here is first name or last name so let's say i want to display john so first name let's check here we have john how about we access the last name okay okay so the next one the data can be modified so for example we have uh an existing obj or object um we want to change the first name so into steve okay so let's see how we're going to do that my obj that first name and then is equal to what steve okay and then let's try this one so the original is jandal after this line number four here after assigning steve to the first name it would become steep though okay so that's it so what's next we have here the json or array inside the json so we have the first name last name so let me type this first okay so now i have this new object which contains three employees or three persons three employees let me change this one three employees john anna and peter so how are we going to access this so that's the first name we have this syntax here so this would access the default the details of john okay so let's see how we're going to use that so again to print console.log and then it says here we have to call for the the object name and the object name is my obj right and then inside d my obj is the employees so remember that this is a combination of json and inside the json is an array and inside an array is another json objects right so json from the outside so it has a employee's name okay so let us try to access this my obj employees so what is the output of my obj and then employees so let's see it has three objects so for index zero it has first name john last name though index one has um and smith to uh is peter and jones okay so let's try to use this it says here that from index 0 it has first name john and bill last name sorry so let us use the index 0. so for using the index 0 of course we have to include the open close square bracket so indicate the index it's either one or zero or one or two depends on the positioning so this is zero this is one and this is two okay let's specify the index zero so let's see what would be the output so it's just first name john last name too so i want to access john as our output so for using an object name we have to include a dot so what is the dot or what are we going to access the first name or last name so that's the first name of course so that's john okay so as we start from here my obj employees and then we access the index 0 and then that first name so that's john so what is the the value of my obj so let's see it's the employees that contains three employees and inside the array of employees it has three index zero one two okay so we're just filtering out the details of or of the uh this obj here okay and then for us to add a new employee from the group of employees here we just need to use this code below okay so in our case uh let us try hey it says here the obj or the name of the object so my obj my obj that then employees or this should be employees not just an employee so employees that push so this a function in order for us to add a new element here so let me copy this one so let me add myself so i hope that doesn't that this code doesn't produce an error because it includes my name so it should work okay so let's see okay so there's no error but it doesn't display anything well of course we should actually put a console.log first console.log my obj that employee so let's see what's inside the employee array of objects so there are four arrays so we have the first name john nothing though first name last name smith first name peter last name jones first name rubik and then last names okay so let's use this so let's try to create a new um html so let's save this one as the reg for example reg or index 2 index 2 that html okay so let's replace it and then here let us copy the index.html and just remove the uh the other parts of this index too with html lost your password and don't have an account okay so we have an index to here which only accepts the username and password okay so for example we want to redirect this lost your password or don't have an account to index.html so we just need to indicate that in our etched wrap okay so let's see so they don't have an account here as this one so once we click this we are in our index to html so once we click this update it should go back to index.html so to do that the form actions should be should specify the index.html so let's try it again submit so it goes back to login form don't have an account goes to html2 or index2 once we submit it goes back to the login form okay so the next one is to use the text box username and password so how are we going to get the value inside of it okay so we have here let me remove this one i have here the var btn1 is equals to the document that get element by id okay so what is the id of this button so the button here is oh it doesn't have an id so let's make one so id is equal to let's say b1 should be b1 and then var d1 is equals to let me get this one oops so var p2 is equals to of course what is the id of this two text and also the pass so the t1 or text box one is the text and then this one is the pass so maybe we should change this into user means it's username okay so username so let's see so the button or btn that on click is equal to the function or in this function we are going to wait let's create first a variable for an array so equals to nothing and then inside the array so there's nothing and then here in t1 once the btn is clicked we will just put the err index 0 for the first user the t1 oops t1 that value oops do you want that value plus t2 that value okay so this is the user one so let's check let us have the console.log the console.log okay so console.log we should put the arr zero oops this should be inside the btn on click okay so originally the array doesn't have a value but once we click this button it would get the users t1 and t2 let's see how this works so the array doesn't have anything inside so let's say i have this then some coin once i click the submit button says here asd asd so as you can see the inputs are being recorded okay so once we click this submit it's recorded but it refreshes the page so that's why it's cleared okay but inside in our array it's already recorded okay so that's for the register so we re-register an account so which i just tried it in our in our login form okay so you should put some id on it and then try to try to check on how we're going to manipulate that using json okay so that's it for now thank you and god bless

Channel: CodeZero - Channel for GEEKS

Views: 419

Keywords:

Id: EEnXNfU80cA

Length: 29min 46sec (1786 seconds)

Published: Wed Aug 04 2021