**Working with JSON in JavaScript**

JSON, or JavaScript Object Notation, is a lightweight data interchange format that is widely used in web development. In this article, we will explore how to work with JSON in JavaScript, including reading and parsing JSON files, accessing and manipulating JSON data, and understanding the differences between JSON and JavaScript.

**Creating a JSON Array**

To start working with JSON, let's create a simple JSON array using JavaScript. We can do this by defining an object with multiple properties, each representing a company. For example:

```javascript

const companies = [

{

"name": "Big Corporation",

"number of employees": 10000,

"CEO name": "John Doe",

"rating": 3.6

},

{

"name": "Small Startup",

"number of employees": 3,

"CEO name": null,

"rating": 4.2

}

];

```

In this example, we define a `companies` array with two objects, each representing a company. Each object has multiple properties, including `name`, `number of employees`, `CEO name`, and `rating`. The `null` value in the second object represents an empty string or missing data.

**Converting JSON to JavaScript Objects**

When working with JSON, you often need to convert it from a string to a JavaScript object. We can do this using the `JSON.parse()` method:

```javascript

const jsonString = `

{

"name": "Big Corporation",

"number of employees": 10000,

"CEO name": "John Doe",

"rating": 3.6

},

{

"name": "Small Startup",

"number of employees": 3,

"CEO name": null,

"rating": 4.2

}

`;

const companiesObject = JSON.parse(jsonString);

console.log(companiesObject);

```

In this example, we define a `jsonString` containing the same data as our previous array. We then use `JSON.parse()` to convert it into a JavaScript object, which we assign to the `companiesObject` variable.

**Accessing and Manipulating JSON Data**

Now that we have our `companiesObject`, let's access and manipulate some of its properties:

```javascript

console.log(companiesObject[0].name); // Output: Big Corporation

console.log(companiesObject[1].number of employees); // Output: 3

// Let's assume we want to add a new property called "founding date" to the first company object

companiesObject[0].foundingDate = "2015-01-01";

console.log(companiesObject[0]);

```

In this example, we use bracket notation (`[]`) to access specific properties of the `companiesObject`. We can also manipulate data by assigning new values to these properties.

**Understanding JSON vs. JavaScript**

One important thing to note is that JSON and JavaScript are not the same thing. While they share some similarities, JSON has its own syntax and structure. In particular, JSON requires double quotes around all keys, whereas in JavaScript, we don't need double quotes.

For example, this is a valid JSON object:

```json

{

"name": "Big Corporation",

"number of employees": 10000,

"CEO name": "John Doe",

"rating": 3.6

}

```

However, in JavaScript, we would write the same data without double quotes:

```javascript

const companies = [

{

name: "Big Corporation",

number of employees: 10000,

CEO name: "John Doe",

rating: 3.6

}

];

```

Despite these differences, JSON and JavaScript can be used together seamlessly. In fact, many web frameworks and libraries rely on both formats to exchange data between the client-side and server-side.

**Conclusion**

In this article, we explored how to work with JSON in JavaScript, including reading and parsing JSON files, accessing and manipulating JSON data, and understanding the differences between JSON and JavaScript. By following these examples and guidelines, you should now have a solid foundation for working with JSON in your future projects.

"WEBVTTKind: captionsLanguage: enin 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 with 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 yaml 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 in 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 its 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 json is valid javascript so it integrates nicely javascript which is used all throughout the web for front end or background of web applications 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 with json by starting by talking about the types that json can represent as we know json is a data representation format so we need to be able to represent 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 arrays 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 null 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 so that's dot json at the end of your file and that'll 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 just strings or numbers inside of that so let's take an example of a user object that we would 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 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 a name we'd surround that name key in double quotes put a semicolon after it and then we'll 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 at the end of that 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 would 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 in 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 when we're writing out json next we could have another property that'll be an array of friends but instead of putting strings inside 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 friends array we could have a friend's array and it can have the same properties of name favorite number is programmer hobbies and even friends inside of that and you can start to get a very deeply nested over a if you really wanted 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 close 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 live example of me writing a 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.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 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 5 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 name and we're just going to give this one the name of 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 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 it 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 just 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 arrow and that's because we're using vs code and it tells us when we have errors inside 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 index.html file here which is just a super simple file that has an opening script tag so we can put some javascript in here to run on our page so let's create a variable we're just going to call it companies and we're going to copy everything from this companies.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 into our companies variable and then if we go down here and we log the companies variable and we check that out inside of our browser here as you can see we have logged this company's variable and we have both parts of our array we have ceo name number of employees rating and all this is the information that we have in this file here that we copied over into our javascript file and same thing down 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 let's surround this in backticks so it'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.parse so if we go down to our log and we say json.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.parse to get a jason 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 we could get their name and now if we say that you'll see it prints out the first company's name you get the 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.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 very much 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 make sure to leave me a like down below letting me know and subscribe for more tutorials similar to this thank you guys very much for watching have a good dayin 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 with 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 yaml 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 in 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 its 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 json is valid javascript so it integrates nicely javascript which is used all throughout the web for front end or background of web applications 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 with json by starting by talking about the types that json can represent as we know json is a data representation format so we need to be able to represent 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 arrays 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 null 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 so that's dot json at the end of your file and that'll 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 just strings or numbers inside of that so let's take an example of a user object that we would 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 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 a name we'd surround that name key in double quotes put a semicolon after it and then we'll 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 at the end of that 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 would 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 in 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 when we're writing out json next we could have another property that'll be an array of friends but instead of putting strings inside 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 friends array we could have a friend's array and it can have the same properties of name favorite number is programmer hobbies and even friends inside of that and you can start to get a very deeply nested over a if you really wanted 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 close 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 live example of me writing a 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.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 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 5 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 name and we're just going to give this one the name of 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 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 it 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 just 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 arrow and that's because we're using vs code and it tells us when we have errors inside 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 index.html file here which is just a super simple file that has an opening script tag so we can put some javascript in here to run on our page so let's create a variable we're just going to call it companies and we're going to copy everything from this companies.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 into our companies variable and then if we go down here and we log the companies variable and we check that out inside of our browser here as you can see we have logged this company's variable and we have both parts of our array we have ceo name number of employees rating and all this is the information that we have in this file here that we copied over into our javascript file and same thing down 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 let's surround this in backticks so it'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.parse so if we go down to our log and we say json.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.parse to get a jason 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 we could get their name and now if we say that you'll see it prints out the first company's name you get the 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.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 very much 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 make sure to leave me a like down below letting me know and subscribe for more tutorials similar to this thank you guys very much for watching have a good day\n"