<?php
// Include the config file first
include_once("../includes/config.inc.php");

// Set the page variables
$page_title = "JSON";
$page_description = "An overview about JSON.";
$page_author = "Pasha";

// Then include the header (it will use the page variables above)
include_once("../includes/header.inc.php");
?>
	    <main role="main" class="container">

	    	<!-- Beginning of blog post -->
	    	<div class="blog-post">
	    		<h2 class="blog-post-title">JSON</h2>
	    	  	<p class="blog-post-meta">Oct 20, 2020 by Pasha Her</p>

	    	  	<p>JSON is a lightweight text-based open 
                      standard designed for data interchange.</p>
	    	  	<hr>
	    	  	<h3>What is JSON?</h3>
	    	  	<p>
				JSON stands for JavaScript Object Notation. It is simply a data representation format that is similar to XML.
				JSON is commonly used for API's and configs. It's known to be lightweight due it's small file size and is 
				easier to read compared to XML because it is much cleaner. JSON also integrates well with JavaScript and almost
				every major language has a library or built-in functionality to parse JSON strings into objects or classes in
				that language. In real-world applications, data vendors utilize JSON to target data they need for the purpose
				of reusing it to display the data on their websites or run algorithms on it.
				  </p>
				  
				  <h3>JSON Data Types</h3>
	    	  	<p>
				JSON data types are strings, numbers, booleans, null, arrays, and objects. Objects are the most complex, but
				most used type within JSON. The object data type allows you to represent values that are key value pairs, which
				you assign a key and value. The value can be any of the JSON data types mentioned above.
	    	  	</p>
			  
				  <h3>How to Write a JSON File</h3>
	    	  	<p>
				To create a JSON file, add the .json extension at the end of the file name. Most of the time when working with
				JSON, you will either have an array or an object as the top level of your file. Then inside of that array or
				object you'll have other values inside of it. 
	    	  	</p>
	    	  	<p>
				  Below is an example of a JSON file called restaurants.json.
	    	  	</p>
	    	  	<pre class="language-js"><code>
	&lsqb;
		&lcub;
		"name": "Olive Garden",
		"numberOfEmployees": 1000,
		"manager": "Bob",
		"rating": 4.5
		&rcub;,
		&lcub;
		"name": "Chili's",
		"numberOfEmployees": 200,
		"manager": "Sara",
		"rating": 4.5
		&rcub;
	&rsqb;
			  	</code></pre>
	    	  	<h3>JSON.parse</h3>
	    	  	<p>
				Before we get to the HTML file, let's talk about parsing the JSON code. Most of the time when dealing with
				JSON files, you're going to be receiving the data as a string. Inside the HTML file code, we surround the
				JSON code with back ticks after the closing square bracket. This back tick will return our JSON code as a
				string. Console logging the code with console.log(restaurants) will return the data as a string. In order 
				to convert the JSON string into a JavaScript object, we need to use JSON.parse. So instead of 
				console.log(restaurants), it should be console.log(JSON.parse(restaurants)). 
	    	  	</p>
				  <p>
				  Below is the HTML file that logs the JSON file into the console.	    	  	
				</p>
	    	  	<pre class="language-js"><code>
	&lt;!DOCTYPE html&gt;
			&lt;html lang="en"&gt;
			&lt;head&gt;
			&lt;meta charset="UTF-8"&gt;
			&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
				&lt;title>JSON Example&lt/title&gt;
			&lt;/head&gt;
			&lt;body&gt;
				&lt;script type="text/javascript"&gt;
					let restaurants =
					&lt;!&hyphen;&hyphen;Notice the back tick right before the opening square bracket&hyphen;&hyphen;&gt;
					`&lsqb;
						&lcub;
							"name": "Olive Garden",
							"numberOfEmployees": 1000,
							"manager": "Bob",
							"rating": 4.5
						&rcub;,
						&lcub;
							"name": "Chili's",
							"numberOfEmployees": 200,
							"manager": "Sara",
							"rating": 4.5
						&rcub;
					&rsqb;`  	&lt;!&hyphen;&hyphen;back tick&hyphen;&hyphen;&gt;
					console.log(JSON.parse(restaurants));
				&lt;/script&gt;
			&lt;/body&gt;
			&lt;/html&gt;
				  </code></pre>
				  <h3>JSON.stringify</h3>
	    	  	<p>
				JSON.stringify is a method that converts JavaScript objects or values to a JSON string. The parameters it
				takes in are an object, replacer, and space. The value that is to be converted into a string is required. 
				The replacer and space parameters are optional. The replacer parameter is either a function or an array used 
				to transform the result, while the space parameter is used to indicate how many space characters to use as 
				white space. 
	    	  	</p>
	    	  	<p>
				  Below is a short example displaying how to stringify a JavaScript object.  
	    	  	</p>
	    	  	<pre class="language-js"><code>
	&lt;!DOCTYPE html&gt;
			&lt;html lang="en"&gt;
			&lt;head&gt;
				&lt;meta charset="UTF-8"&gt;
				&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
				&lt;title&gt;How to Stringify a JavaScript object&lt;/title&gt;
			&lt;/head&gt;
			&lt;body&gt;
				&lt;p id="demo"&gt;&lt;/p&gt;
				&lt;script&gt;
					var obj = {"name": "Applebees", "numberOfEmployees": "250", "manager": "Jill", "rating": "4.5"};
					var myJSON = JSON.stringify(obj);
					document.getElementById("demo").innerHTML = myJSON;
				&lt;/script&gt;
			&lt;/body&gt;
			&lt;/html&gt;
			  	</code></pre>
	    	</div>
	    	<!-- End of blog post -->

	    </main>
<?php
include_once("../includes/footer.inc.php");
?>
