How JSON Works (and why you should care)

Michael Elliot here, Learning Nan, trying to learn JSON, getting stuck on flows. This is the video for you. Now I'm going to run you through the basics of JSON, literally from start to finish. Different data types, you know, how they are applied, how they should be used, what an array is, how an object can contain anything. I'm going to run through all of these steps with you to give you a baseline understanding as quickly as physically possible. And I'm going to start by explaining what JSON actually is. So JSON is actually basically a way of writing down information in a way that a computer can understand it perfectly. So it understands exactly what that information is. It takes it from us typing it in to being able to compute it and actually be able to use it. Okay, so what we need to do is execute the workflow. I already had done that, but we'll execute the workflow. If you've watched my previous video, you'll know that pressing one will align everything on the screen. I have these here that I've built out. I'm going to delete them and press one again. That's the hotkey. It will centralize it. I will try and zoom in as much as I can on the areas that we're going through. So the heart of Jason is keys and values. Think of keys and values like you think of people in your phone. In your phone you have your mum and you will have the number. Well, the key is your mum, your mum's name, dawn, for example, and the value is the number. Now, little bit of a unique caveat because it depends on the data type, but that's exactly the way that you should think about keys and values. You might have like home city, Sheffield, for example. Key is home city Sheffield is the value. Now if we look inside of keys and values, we've got some examples. So we've got manual mapping. Key and value. It's a string. String is text. String is text based. That's all that you need to know. Another key, another value. String name, Daniel, Location, Sheffield. String, string. Now if I change the name of this to Michael, for example, and execute the output, the JSON output is going to be Michael now. So you can see how you can manipulate this. You can add fields. You can, you understand how you can have that. You can, you can have location, I don't know, you could have, I don't know, street name. And then you could have Hodgkinson Road. Hodgkinson Road. And then execute and you have your keys and your values. They are now Becoming useful. You can see how you can log information. But a data type when it comes as a string is an easy example. So like for here email example, let's say Michael previously was michaelmail.com if we execute that inside of a string then you'll see the email example michaelmail.com comes out. So the use case for strings is really important. You'll notice a moment ago I changed that from an array because the setting was as an array and it shouldn't be, it should be a string because that's that type. Very, very simply, very simply put, you know, the key and the value are what make this up. A data type as a string is simply text on its own. It means that, you know, it's, it's a written down text based piece of content. But importantly, when using JSON it's always enclosed in double quotes. So that's something that we'll get to as we get further through the, the video and we start to, we start to really build stuff. But like obviously you can see in the output there always inside of curly. Sorry, inside of quotes. Email example inside of quotes, which is the key and the value. Michaelmail.com also the, the inside of the quotes, but there's the value. So that's really important to remember when you're building things later that we're going to get to. So a number is simply a number. It can be a whole number, an integer like 15, 20, 100, or it can be a decimal which is called a float. Okay, now you, when you're using numbers inside of JSON, you literally just type, type the number. Okay, so I'm going to just change this quickly. If you were to write a number and we're going to do this in a moment. But if you were to write a number, you have the key inside of quote marks, but the number does not need quote marks around it. As you can see, this bottom one is incorrect and would break. If we're talking about strings, obviously we saw the output of that and we saw that the output of the string was actually double quoted. A number doesn't need to be double quoted. It literally just needs to be a number. So if we add this here, now add a field. I mean I could have just done it anyway, but JSON example number. And let's go to 175 and I'm going to change. This is the first time we're changing this so you know the data type. So we're going to change it to a number and then I'm going to execute It. Well, if you look at the output now, the JSON output again. So it's all JSON, the output, the JSON, you'll see that 175, there is no brackets. That there is no brackets around it. And it. Because this becomes. The reason I'm drilling this into you is because it becomes important later on when we start to talk about objects and things. But let's roll through all of these. Boolean is a tr, simply true or false, always lowercase and without quotes again. So you should think of it a little bit like a sort of if. It's like an if, an if statement, if you like. It's a if it's true, if it's false. Like it's not necessarily an if statement. But what I'm trying to say to you is like are you in a position where this is true? So does it. Does the does is the name Michael, is it true or is it false? That's it. There is no variables outside of that. There's nothing else to understand about a boolean. So JSON boolean example false. If I execute the step, you will see that that has no quote marks around it. If I was to change this to true and then hit execute, then you can see that it turns to true. And true and false are the only, the only two outcomes that are required. Quite simple. Now, null is a bit of an anomaly because it's a special type. It's a special data type. It means nothing, no value or empty. But it doesn't mean that there's, that it doesn't exist. It just means that there's no value there. Right? There's nothing there. So that can be quite complex to get your head around. But it basically it's different from zero. Like for example, zero is a number that. This is what I was trying to explain. Zero is a number. Now zero can be zero. It means there's nothing there. Zero is a number, is nothing. So if we use the number and it was zero, we tried to use that in some formula later on, the number would be zero. So effectively it's, it's, it's, it's nothing. But it's not null, it's zero. Whereas null is effectively, you know, like double quote marks or nothing inside it. It's an intentional absence of a value. So it still exists. The key. You know, you might have a key with no value which is, which is there. So you have this JSON example, null. Null is always an object you execute and you can see there that there is no output. Now there are use cases where you would use that. But it's not going to be the main focus of what you've got now. Something which is extremely important. Okay. And this is where the juicy stuff starts to happen. So an array, an array is an ordered list of items, okay? So think about, think about it a little bit like a menu. Menu item one, menu item two, menu item three, menu item four. You would have them in an array, okay? And number one would be, you know, spaghetti Bolognese. Number two would be carbonara, you know, number three would be polychromo, whatever. Like you would have them in, in that, in that way. Now if we go inside of this array and execute the step, you can see here that there's a JSON example array. And you can see that the, the important thing about an array is that it starts with square brackets. Square brackets are at either, are at either side. It doesn't remove any of the previous information I've provided you with. Which means for example that text string based elements have to be inside of quote marks. It doesn't remove the fact that null or a boolean or a number don't need quote marks. It doesn't remove any of those things. But what it does do is it gives us an opportunity to be able to group things together. But we can use every data type so. Well, we can use data types inside of an array to group things together. That can be numbers, that can be strings and that allow us to be able to build things out. So let's build one together. So I'm going to put JSON example array 2 and in here we're going to obviously start with the curly brackets. I'm going to put them both in and I'm going to have let's say today's date. Let's just say that today's date. Then you put a comma and you put 13 and then you put another comma and then you put oh, eight. Then you put another comma. This is not how you would map a date. But I'm just trying to show you case to you examples of how you would put this in. And then if we hit another comma and we put true and then hit execute, you'll see that there's another example array that's just come through example array 2. There's a. Where's that coming from? Yeah, spaces in in between execute step. Got rid of those. Most of them regardless. They're just not. That basically mean that it's an empty. An empty line. But yeah, you've got that you could change it to literally anything you wanted. Like, you could literally have that as, you know, second element, like I did before, second element, execute. But the point is, is that you have inside of there the ability to be able to group items together. Numbers, booleans, you know, you can basically choose whatever you want to put inside of an array and order it, and order it in a way which, which is, you know, reasonable. So let's do something that's actually practical, shall we? So, menu item. Menu, menu item. Spag bowl. Forgot the curly bracket, forgot the quote marks there. Menu item two. Carbonara. And let's put those inside the curly brackets because they both should be. Remove the spacing, hit Execute Step and you'll See Menu Item 1, Menu Item 2. The spacing involved in it, you know, causes the issues with the new line. But I'm not bothered. I'm trying to show you about the, about the array, okay. And how you group them together. So you can see menu item one, menu item two, you would go through and you would build them out now as you actually do that in practice and go through basically just using the initial example that's inside of here. What is crucial is you can have a second array inside of the. The. The. You can have a second array inside of an array. So you'll see here this, the second element. So you open the first array here, you have first element, it has a number, it has a boolean, and it has null. And then you open another array which has an integer, a number, and then has the second element, and then you close it twice, then close the curly brackets and the closing of the JSON as a whole. So what I'm saying to you is you can add multiple layers of individual arrays inside of. Inside of there. You can, and it's easy to do, but this allows us to structure complex data like our contact card from the beginning. And that's what. Sorry, that's what an object does. An array can hold anything inside of it, but it's made up of indexes, not keys. So that is why we do it the way that we, we have just done. Whereas an object, in comparison to that starts and ends with curly brackets. This is the main concept. An object is a collection of key and value pairs. Key. So effectively we know that JSON is built on key and value pairs from day one. We know that that's exactly what it's built on. An object allows you to have everything inside of it. This allows us to structure complex data like the contact card from the beginning. If I go Back and execute this again. Let me just execute the workflow again and go inside of the object and see if you look at the object here and we look at the output, you can see here that we've got the example, the example object and then we've got a key and a value. Okay, on its own we've then got. So let me change this. So let's just say this is email and then the value is michael@gmail.com and execute. You'll see that it updated that now to. To the email it then. So that has a key and a value. So it's got a key and a value string inside of the. The object. Well, the event, we then want to add an array. So you end it with a comma and you open an array with the key. And then inside of that, with the semicolon inside of that array, you can have whatever you want. So like, if we wanted. I don't know, numbers are a really good example to keep, to be fair. But if we wanted, I don't know, like Michael, execute step. You see how it changed from Michael to. From. From number one to Michael. So what, what you get in here is you're getting into the power of being able to manipulate data. Okay, this is what we're getting into now in the next step, which is expressions, which I'm excited about, I'm going to see. But all you've got to do is follow this simple process when creating a. Creating an. An object. Okay, it opens with a curly bracket. It has the object setting. You see the curly bracket there where it opens if it's a key. And all the principles that I explained to you stand so integer. The key has quote marks, but the number does not. Okay, an array has the. The key for. For. The array has quote marks. You then have semicolons, which is the difference with an object, set the semicolon in the middle, but then inside of the array you build it as normal. So if it's a. If it's string, it needs quote marks. If it's a number, it doesn't. If it's a. If it's a boolean, like true, it doesn't. You can edit and manipulate the data as much as physically possible. You literally can have that. And you'll notice that inside of the array, now I have an object, but then I have an array inside of the object. And that individual array contains multiple different data types. A string, a boolean, and a number, an integer. So you can see the power of how an object works and why it's the most critical element of, of what you're building because being able to do this in a real life scenario is key. So the next step, using JSON in nan, this is where the magic happens. So this node actually creates a custom message. So if we look at this as a value now. Hello. The number from the tutorial is, is. And then you'll notice that this is in green, right? They are all strings, but there's a big difference. If I hover over it, you can see it. So I'm not sure I'm going to be able to draw, but yeah, there you go. Oops. No, it's not. Allow me to. If you, if you hover over this, you see it's fixed and it will change to the text that you've got there. If you change it to expression, it will allow us to use expressions. So, so if I execute on this, we've got the, the keys, a message, sub key array, second item and boolean. Okay, now what if we wanted to pull a different integer? So if we go back to the number here, I, I, I added 175. Well, this is mapped using schema. So across these bars you will have three options. You have schema, you have table, which, table view, which is really clear to look at. But JSON, which is the actual JSON, which is the focus of this video. But if we look at the schema now where we're using expressions, this becomes very easy. Eventually you will be able to do it manually yourself and it will help because you can get ahead of flows and stuff. But this is, this is pulling from the example imager, but it's pulling the, the number two. So I don't want it to pull, I don't want it to pull the, the, you know that, that example integer. I want it to pull from the number and I want it to pull the float, let's say. So what I would do is I would literally just delete that expression and I would drag that flow over and I would drop it in. And if I execute that step, you'll see the number from the tutorial is 12 and a half. If I do that again and drag that over and pull in the JSON example number that I had earlier and hit execute, you'll see that the number changes to 175 in the output. If we look at it in the table view, we, we can see the message. Hello, the number from tutorial is 175. Sub key find me is obviously found because the sub key existed in the Previous node, which you can also skip through by the way, by doing this, you see. So this allows you to go all the way back through. It can be extremely helpful. Maybe don't click as fast as I did because that, because that'll kill you. But yeah, you can move these around. So let's do something, let's do something that, that we did. Like what did we, what did we add? Key and a value. So we want to add here. We want to add. We want to add a name, right? And inside of that name we want to add Michael. We pull that over. You'll see it pulls from the key and value, which is the name of the node. That's how you, you know that.item.JSON. name, which is this. Now if I execute, it's gonna. And just go to JSON, you'll see the name output there is Michael. So it found my name. But there are multiple individual things inside of the key and value. So what if I change this to location and hit execute? Well, if I hit execute, the. The key is going to be location, but the value is still going to be Michael. Now of course we could drag and drop the, the, the location over. We could do that. But just to show you how you would do this, if you go Back to item JSON and then put.it will give you all of the options that are available inside of that individual node, all the fields that are available. And we want location. So we change it to location by clicking Enter and we execute the step. And the location is now Sheffield. So I hope that is giving you an understanding of how you can pull dynamic data using expressions, be able to pull out information that you want, provide it in a format which is usable later on in flows. You can take names. It does email match. Does. Does. Is the, is the location equal. Sheffield, whatever. You can do an abundance of individual things inside of there, which is incredibly powerful and gives us some real, real, you know, work, working use cases that we can, that we can run through. Now once we're back inside of here, the final thing to do is in terms of putting it all together as a final sort of exam. See. Well, that's broken. Execute. There we go. Yeah. Okay, so this is now summarizing every single individual section. Okay, this is, this is a summary of them all. Now you can see summary string, summary number, summary, boolean, summary, null, summary array, summary object. And as you go through them, you can see what they are. They're all labeled correctly, which is really important. And you can see that they are all Using custom expressions to pull information. Well, that's absolutely fantastic. And you. We can, we can pull that together. And how we would do that would be by. If we go into here and we close this all down, this is the string. So we open two curly brackets and now all of the data is available and accessible to us. We go string.period.period JSON.email example and execute it. And that would work. Now that pulls you the summary of, of that string. Now if I wanted to manipulate that a little bit more and I wanted to come back through here and I wanted to look at like, I don't know, there's many things you can do. I don't know. I don't think this, the more granular stuff is for the next step. But what I will show you is just as an example is like you're trying to pull the, the string here. So email example. If we go to the individual string, we've got an email example. If we go back to that and we edit it and we add another email email example two and we use don't know, I call it gmail1.com now let me change it. That bugs me. ICloud.com and execute that step. In fact, let's execute the whole workflow so it has all the data. But if we now go back into here, okay, well if we execute, it's still pulling the michaelmail because we're pulling the email example. But if we were to run this back and press the period here, we now have the option for the additional piece of data. So we have the ability to be able to pull. If I execute, it's going to pull that second piece of data there, which is a perfect example of how you can manipulate this with JSON. This whole summary page gives you a real example of exactly how you would pull all of that data from. You know, looking at what the individual data type is, how you would pull it from all of the names that are inside of the individual sections. And there's a fantastic tool for you to, to be able to test this. I will share with with you the template on NAN, which inspired me to do this video that you can use. And that's going to allow you to further test your skills with the structure that's already set up. Hopefully you were build this sort of building along with me and going through each individual step. I hope that you enjoyed it. The next step is going to be even in more detail about how we're going to extract data from objects and arrays. I'm looking forward to it. Thank you for this like and subscribe. Catch you soon.