Intro to JSON for Node-RED

javascript object notation or json is a really common data format used all over the world in different web services iot applications many apis and lots of other places including being a critical part of node-red if you've never seen or worked with json before it may seem a little daunting at first but the structure is really easy to understand and get started with and that's my goal for this video i'll start by showing a generic example of just what json looks like and how it's structured and why it's structured that way then i'll show some real world examples and tools to help you get the most out of the format now the first thing to know right off the bat is that javascript object notation data is stored as simply text you can store it in a txt file and that is to say that it's a text representation of a javascript object and that's why it has javascript in the name but that doesn't mean that it's restricted to the javascript programming language in fact nearly every single modern programming language from python to c and of course node-red has different ways of producing consuming and parsing json formatted data because it's really specifically structured it's really easy for programs to work with json formatted data but that consistent structure also makes it really easy for humans to read it as well and we'll start with a nice generic example to show you what i mean by that the first thing i need to do is define where my object starts and ends and so i do that with an opening curly brace and a closing curly brace and that's it i've already got a javascript object notation data right here it's just an object that happens to be empty and something else you should know is i am going to be spacing out my data here a little bit so that you can see everything layered nicely but there isn't actually any white space in javascript formatted data we'll see an example of that later on to make this a little bit more readable let's space these brackets out and actually start putting some data in here i'm going to put my notes in red but the data is going to stay in black so that you can keep track so my first thing i want to note is that each property exists as a name and value pair where the name is always a string and the value can be one of many things so let's see an example of that i'll start by dropping my bracket down and we'll fill this object in with some more properties the first property i'm going to call company and it's just going to have that name on the left the name of this property is company and it's always going to be a string the name always is a string but the value could itself also be a string and this pair makes up one property so when i have a name and a value i know that i have some property and it always exists with a name on the left which is a string and then some value on the right so there we go now i've got one property inside of this object so if i refer to the company of this object i would get back the value opto but what if i want to have more properties or i want to have properties that aren't strings well the first thing i need to do is add a comma after my first property you never have a comma at the end of all your properties only in between them so let's add another one here this one i'll also give a string name and this one is called count and it has the value 22 and this time instead of it being quote 22 and quote it's just the number 22 and both me and any computer programs i send this to are able to differentiate the fact that it's a number and not a string because it doesn't have quotes around it so now we have two different properties in here let's add some more and see what other data types we can have here what other forms can the value take again we'll have to have a comma after our number 22 and we'll have a value called open the name of this one is quote open and quote and it's going to have the value true and this is a boolean so it can either be true or false and again we could have the string quote true end quote but this way without the quotes around it both me and any computer programs know that it's this boolean value it's either true or false this is really useful for things like discrete inputs and outputs because they can just have one of two states true or false on or off but what happens if you have some kind of reading let's add another property in here that's just called reading but i don't know what the measurement is i can't just put in zero if i don't know it because it could be a measurement of say zero degrees or zero gallons i can't put false because that means that it's off i need some way of saying hey look i have a reading but i don't actually know what it is so we have a special word for that and it's null again this exists without quotes it's a special one kind of like booleans and numbers and this just says we don't know what it is it's not that it's zero it's that we don't have a value for it there's no value for this particular reading so these are the main types we can have for our values strings numbers booleans and then this sort of special null no value representation but what if i want to store more than one value for some particular property let's have a look at that now i'll again add another comma after my null and i'm going to add a list and a list lets me store multiple values so in this case i have three strings but i could also have an array or list of numbers or a list of booleans or i could have a list just saying no but these are inside of square brackets not inside curly brackets and that's how we know that it's an ordered list this array but instead of having some name to refer to each of these people by i instead refer to them by their number as they appear in the ordered list so item 0 is going to give me benson item 1 will give me bob and item 2 will give me ben and we'll see how to actually refer to this a little bit later on the final type i can have is actually an object itself so let's say i want to store the address for this company i of course have to have a comma at the end of my list i'll put my address in and then i'm going to define a new object within my main object here and it's going to contain different properties that are going to represent parts of the address i could have it just as one long string but i want to break it down separately so inside of this value it's which itself is an object i'm going to have a street property that's going to be business park drive then i can put a comma in and have another property here that's got the name code and that can be 92590 and each of these sub properties are themselves name value pairs and i can refer to them by moving my way through the object so let's have a look at what that might look like we'll start with this outside object you can see the two curly brackets on the left to find my main object you can see within that i have an address object so to refer to that address object i do a dot address and then finally i want to get that sub property dot code so i go from the object my main object here to dot address property to the sub property dot code and that will resolve to my 92590 so it's really easy for me to break down these different layers and get the specific data i want let's have a look at a real world example here i've got some data from the open weather map api and you can see like i said before there's actually no white space in here it's all just raw text but we can easily break it down to make sense of it we've got a coord object here and that has itself an is an object with two values inside of it one's called lon for longitude and one's called lat for latitude and they have a different floating point values to them then i have another weather property here and that happens to be an array that contains a description of the current weather conditions you can see just by identifying where each of the brackets and commas are it's really easy to break down the data just by glancing at it like this but what's cool about javascript object notation is it's really easy to force it to print it out a little bit prettier and refer to that as pretty print here i have an extension for my browser that does that for me automatically you can see here i have my code and it's breaking down nicely into this object and i can collapse that here's my weather array with my data inside of it my main information about the current temperature and so on we have all this different data really nicely broken down into this easily readable pretty format so we can see that it's nice and easy to grab our data but what if we want to grab something specific like for example the light rain description or just the current temperature let's take a look at an example in node-red we'll be bringing the same data into a nice simple flow if you don't know how to work with this we do have another video that covers the open weather map api in depth we'll have that linked in the description below let's start by just viewing this raw data if i select this you can see here i'm able to return a parse json object automatically out of this http request node or i can also grab it as just a utf-8 string let's have a look at that in this first example i'll deploy my changes to the flow inject and you'll see here on the right in the debug pane i get that raw text if i didn't have some way of automatically parsing it with the node that's no problem i can just come down to these parsers and drag in a json parsing node you can see by the description of this it's able to turn a json string into its javascript object notation and the other way around for now though i'll just use the built-in one with the http request node so i'll make sure i return a parse json object deploy and we'll view that nicely formatted data as it's broken down by node red in the right here now we can see that i have my cohort object that has my latitude and longitude my weather is an array with that one index of zero in there and that holds these different pieces of information now you can see it's saying scattered clouds and we have our different main temperature information here and some stuff under system like our sunrise and sunset time all of this data is really nicely broken down as you can see here once it actually parses the json now let's pick out a specific value let's say i just want to see the city name temecula so that'll be under message.payload that's the name of the main object that node red hands around and that's what is produced by this http request node and we want to get the property name which is going to give me this string value temecula if i don't know how to drill down to that it's fine i can just use this third button on the left here and it'll copy the path to this particular property to my clipboard now i can view just that specific property let's make a copy of our debug node here and put in the specific property instead of message.payload i'll paste this in and we'll see we'll go to message.payload.name let's have a look at just that one specific property and we should expect to see the value temecula now i'll deploy inject here on the left it'll grab out that specific property and there we go you can see that this node is just grabbing the string temecula outside of this larger object but what if we want to go one deeper for example under chord we could get the latitude and the longitude let's grab the latitude for now i'll again use that link over here on the right select that and paste that into my debug node you can see here it's still going under message.payload then we go into the property cohord which itself is an object and we grab the specific sub property latitude so let's have a look at that now i'll deploy and inject all my debug and here we go we can see i've extracted that latitude as it's one sub property deeper you can also see that it's identified this as a number because it doesn't have quotes around it whereas temecula is red with the quotes around it so we can immediately see the data type let's grab one more example inside of this weather array i want to go into the weather array go into this first index of xero and grab this description scattered clouds again to make it easier i'll just copy this path to my clipboard and i'll paste that into my debug node here you can see i'm going to message.payload then i go under weather and instead of doing dot to zero i use the same square brackets to identify which specific index i want to do so because i defined it with the square brackets that you saw earlier you can see those right here we also use those square brackets to identify we want this zero with item let's have a look at that now we're going to go into this item and grab this description scattered clouds and display that in the debug pane let's go ahead and click deploy inject and we can see there we go i'm going to this zeroth item of this weather array and grabbing the description for that particular object it's really easy to see how these items are broken down just by following the nice generic example that i started with you've got all the different data types that you could ever need for example strings numbers booleans and then finally that special null value you can also store lists and sub objects within objects that are larger and containing it you can break this down as deep as you need to to get multiple layers of of data so that you can have a really specific structure for whatever you need whether it's weather whether it's some kind of industrial control or just api data from any different source you could imagine if you have any questions check out the node-red forums or our opto forums that we'll have linked in the description below thanks for watching [Music]

Channel: Opto Video

Views: 42,657

Keywords: automation, opto 22, opto, opto22, automatizacion y control industrial, groov, groov EPIC, groov RIO, opto 22 groov, IoT, IIoT, Opto programming, node-red, json, tutorial, learn json, intro to json, javascript object notation, learn programming, opto programming, programming, json tutorial

Id: pbzwYKbGPC4

Length: 12min 57sec (777 seconds)

Published: Wed Mar 16 2022