Learning Json | Learn Json In 10 Minutes

Web Dev Simplified

Subscribe Here





Learn Json In 10 Minutes


Hello, everyone my name is. Kyle, and this is Web. Dev Simplified. We make the Web easy to understand and accessible for everyone in this video. I’m going to be going over Json, which is one of the most important concepts that you can learn as a programmer or as a Web developer. I’m going to be going over What Json is why you should know it and all the syntax involved the JSON, and at the end of the video, I’m going to go through examples of JSON, so make sure you stick around till the end Json. Also known as Javascript Object Notation is simply a data representation format, very similar to XML or yamo, it’s used widely across the Internet for almost every single API that you will access as well as for config files and things such as games and text editors like vs code and many many other places throughout programming, it’s used because it’s extremely lightweight to send back and forth due to the small file size. It’s easy to read compared to something like XML since it’s much cleaner, and there’s not as many opening and closing tags to worry about, and it also integrates very nicely with Javascript since Json is just a superset of Javascript, which means anything you write in a JSON is valid Javascript, so it integrates nicely with Javascript, which is used all throughout the Web for Front-end or back-end of levitation. Also, almost every single major language has some form of library or built-in functionality to parse JSON strings into objects or classes in that language, which makes working with Json data extremely easy inside of a programming language throughout your programming career. You’re going to use JSON all the time whether it’s creating an API consuming an API or creating config files for you to use or for other people to use for your application now that we understand what Json is and why it’s important, let’s dive into some of the syntax involved to JSON by starting by talking about the types that JSON can represent as we know if Json is a data representation format, so we need to be able to represent a certain data types within it and Json Natively supports strings numbers and these numbers can be in any format whether they’re decimal numbers, whole numbers, negative numbers, even scientific notation numbers. It supports booleans, which can be either true or false. It supports Null, which essentially stands for nothing a raised, which can be a list of any of the types that we’ve talked about, plus the next type, which is the final type of object. An object is the most complex but most used type within Json, and it allows you to represent values that are key value pairs, so you give it a key and then a value and that value can be anything of the other types. We’ve talked about so string Number Boolean array. No, any of those different types can be the value for a key, so let’s dive into an example of how to use json inside of a file. The first thing that you need to do is to create a file with the dot. Json extension at the end of it, That’s dot JSON at the end of your file, and that will create a JSON file inside of this JSON file. What you do is you take one of the types that we talked about, and you put that inside of the file. So for example, you could put a string. You could put a number a boolean whatever type you want inside of that file, and that’s valid JSON, but if all you have is a single string or a single number, it’s really not very useful to have a whole file for that single input. So what most of the time when you’re working with JSON, you’ll have either an array or an object as your top level of your file and then inside of that array or object, you’ll have other values, so it may even have other objects have other arrays or even just individual values such as strings or numbers inside of that, so let’s take an example of a user object that we want to put at the top level of our JSON file, which we’re going to call user JSON to create an object. We need to use opening and closing curly braces and then inside of that, we’ll put all of the key value pairs that make up our object and every single one of these key value pairs, the key must be surrounded by double quotes, followed by a colon and then the value for that key. And then if we have multiple key value pairs, we need commas separating every single one of our key value pairs, similarly to how we would create an array in a normal programming language, so for example, if our user has an we would surround that name key in double quotes, put a semicolon after it, and then we would put the value of our name inside of double quotes as well because it’s a string and it must be in double quotes, and then at the end of it, we’ll put a comma because we have other key value pairs for our user, for example, if we wanted to use a favorite number as another property, we will put favorite number in double quotes, followed by a semicolon and then put that user’s favorite number. Then if we wanted to use a boolean, we use a comma and then another property we would use is programmer as our key put a colon, and then we would put either true or false with no quotes around it to signify that this is a boolean and not a string, so we would put true or false, depending on if that user was a programmer or not, we could then go down and use hobbies as our next key value pair, so put hobbies and double quotes semicolon and then to create an array we use opening and closing square brackets and inside of the array, we put whatever type of value we want, and in this case, we’re just going to use strings for the different hobbies, so we’ll put those strings inside of double quotes and we’ll put commas between each one of them because we put commas between all the values in an array or writing out JSON next, we could have another property that will be an array of friends, but instead of putting strings inside of this array we’re going to put more user objects inside of that array, so we can put different user objects inside of that array and now we have nesting of arrays with objects and that’s how you really get into the power of JSON, where you can start to deeply nest different properties and really show a hierarchy of data as opposed to just a flat format of data like most data format files. Give you so for example, for this friend’s array, we could have a friend’s array and it can have the same properties of main favorite number is programmer, hobbies and even friends inside of that, and you can start to get a very deeply nested array. If you really want it, then we just have to make sure that we don’t put a comma on the very last property value key pair that we have closed it with a curly brace and that’s our full. Json file created now that we understand what Json is and the syntax involved with writing JSON. I’m going to jump into example of me writing JSON file and then parsing that file in Javascript. So I have Visual Studio code open, and I’m inside of a file called companies Dot Json where we’re going to store an array of different companies, and each of these companies is going to have a name number of employees, a CEO and their rating out of five, So let’s get started by using our syntax for creating an array, which is to use an opening and closing square bracket and inside of this array we’re going to store different objects, so our first object is going to be our first company, which, as we mentioned has a name and we’re just going to give that company a name of a big corporation. And then we put the comma at the end of the row. We want to give it number of employees as well and then this number of employees for this big corporation we’re going to say that they have 10,000 employees. Then we want to give them a CEO and their Ceo’s name is going to be married and then Lastly, their rating out of five stars is going to be a 3.6 and now we want to store a second company in this array, So we just put a comma at the end of our first company object, open up a new object and then give it the same properties. So we’ll say your name, and we’re just going to give this one. The name of a small startup go down to the next line. We got number of employees in this case. They’re just going to have three employees since they’re a small company. CEO is next and this company does not have a CEO because they’re so small, so we’re just going to put a null here, which is okay to have different types inside of your JSON object because JSON doesn’t care what types your different keys are. They just matters that you have keys and values, so we have null here, and then Lastly, we’re going to give them A rating, make sure to put that in double quotes and their rating here is there’s going to be 4.2 or 4.3 and there we go. That is our entire company’s. Json object, And as you see, we have no errors, but if we, for example, didn’t put the quote here, you see that we get an error and that’s because we’re using vs. Code, and it tells us when we have errors instead of our JSON, so we know that our JSON is always going to be correctly formatted. Just like this is here. Now it’s looking up this indexhtml file here, which is just a super simple file that has an opening script tag that we can put some Javascript in here to run on our page. So what’s create a variable? We’re just kind of call it companies and we’re going to copy everything from this company’s JSON, because as I mentioned at the beginning of the video JSON, anything in Json is valid Javascript, so we can take this JSON directly and just paste it in to our company’s variable. And then if we go down here, we log the company’s variable and we check that out. Instead of our browser here as you can see, We have blogged this company’s variable and we have both parts of our array. We have CEO name number of employees. Rating and all of this is the information that we have in this file here that we copied over into our Javascript file and same thing. Now here we have our other company, but most of the time when you’re dealing with JSON, you’re going to get it back as a string and not as an actual Javascript object so to emulate that will surround this and back text, so there’s an actual string, and if you save that, you’ll see that now our console just has a string instead of an actual object, and we can’t actually use this object inside of our Javascript so in order to convert this JSON string into a Javascript object, We need to use what’s called Json dot parse, so if we go down to our log and we say Json dot parse and we pass it in a string, it’ll take that string and convert it into a Javascript object. So now as you can see in here, we have our Javascript object that we created from this string here using Json dot, parse to get a JSON object right here, and we can use this inside of Javascript, for example, if we wanted, we could get the first company inside of that array and we could get their name and now if we say that you’ll see it prints out the first company’s name. Okay, Second company’s name prints it out and so on and you can do anything that you could do with a normal. Javascript object to this newly Parsed Json object that we created with Json Dot Parse. So I hope this video was useful for you As you can see. The actual format for JSON is fairly straightforward. You just have to mostly remember to use double quotes around all of your different keys because in Javascript, you don’t need the double quotes, but in JSON you do need these double quotes other than that. It’s very straightforward, It’s easy to read, which is great because just looking at this. You can tell what it’s representing and you can tell what the different keys and values mean, and it’s extremely lightweight, so when you send it across the internet through different apis, it’ll take up a very little amount of space, which means it’ll quickly send back and forth, which gives your user a great end experience. So thank you guys very much for watching you. Now know everything you need to know in order to use JSON and consume JSON in your future projects. If you guys enjoyed this video, please, like, surely leave me a like down below, letting me know and subscribe for more tutorials similar to this also let me know down in the comments below what other style tutorials you’d like me to cover similar to this one and as short as manner as possible. Thank you guys very much for watching. Have a good day.

0.3.0 | Wor Build 0.3.0 Installation Guide

Transcript: [MUSIC] Okay, so in this video? I want to take a look at the new windows on Raspberry Pi build 0.3.0 and this is the latest version. It's just been released today and this version you have to build by yourself. You have to get your own whim, and then you...

read more