Part 20 - Learning JSON for Beginners

Written by Eric Muss-Barnes, 2 January 2019

Remember when I said you should not learn new technology, unless it is useful?

Here is some new technology called JSON.

JSON is an acronym for "JavaScript Object Notation" and is simply a type of text file, containing data for JavaScript to parse. JSON is similar (and in my opinion, inferior) to an XML file being parsed by other languages like PHP. I don't really recommend using JSON for anything, but it's very "hip" and "cool" and "trendy", so I figured I would share how it works, then you can understand why it's a bad idea to use it.

Let me give you two examples of showing data on a webpage. One will use JSON and one will use XML. These are actually a code test I did for Guitar Center when I was job hunting in the fall of 2018. The assignment was to use JSON but I decided to use both JSON and XML just to show them the advantages of the XML approach.

PART 20 - LESSON A - JSON PAGE

<!DOCTYPE html> <html> <head> <title>Guitar Center, Inc. / Front End Web Developer Code Assessment</title> <link href="styles/main-stylesheet.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="application/javascript" /> <meta charset="UTF-8"> </head> <body> <!-- **************************************************************************************************** Guitar Center, Please note, I made two different versions of these test pages. I did one which followed the instructions and uses JSON and JQUERY. I also made a PHP version which parses an XML file. I figured you'd appreciate seeing two different versions, so you can see my use of different technologies to tackle the same issue. To the end-user, each page looks identical. But, the PHP version has the advantage of being simpler code, plus it displays actual HTML in the browser. Thanks for checking it out! - Eric Muss-Barnes *************************************************************************************************** --> <div class="wrapper"> <header class="header"> <ul> <li class="dropdown"> <a href="#" class="dropbtn">Guitars</a> <div class="dropdown-content"> <a href="#">Electric Guitars</a> <a href="#">Acoustic Guitars</a> <a href="#">Acoustic-Electric Guitars</a> <a href="#">Classic Guitars</a> </div> </li> <li><a href="#">Bass</a></li> <li><a href="#">Drums</a></li> <li><a href="#">Keyboards</a></li> <li><a href="#">DJ & Lighting</a></li> <li><a href="#">Used Gear</a></li> <li><a href="#">Clearance</a></li> </ul> </header> <div class="middle"> <div class="container"> <main class="content"> <div class="tooltip"><img src="images/main.jpg" class="mainimage"> <span class="tooltiptext"><b style="text-align: center;">New Guitars</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis laoreet odio, sit amet rutrum ligula aliquet vitae. Phasellus venenatis rhoncus tortor at cursus. Duis et porttitor diam, sodales placerat lectus. </span> </div> <br> <main> <input id="tab1" type="radio" name="tabs" checked> <label for="tab1">On Sale</label> <input id="tab2" type="radio" name="tabs"> <label for="tab2">New Arrivals</label> <input id="tab3" type="radio" name="tabs"> <label for="tab3">Sign Up</label> <!-- ******************************************** THIS STARTS THE "ON SALE" TAB DATA ******************************************** --> <section id="content1"> HEADLINER DEALS <div class="headlinerrow"> <div class="headlinercolumn"><img src="images/product1.jpg"><br>Name of this Instrument<br><del style="color:red;">Was $500.00</del><br>Now $295.00</div> <div class="headlinercolumn"><img src="images/product2.jpg"><br>Name of this Instrument<br><del style="color:red;">Was $500.00</del><br>Now $295.00</div> <div class="headlinercolumn"><img src="images/product3.jpg"><br>Name of this Instrument<br><del style="color:red;">Was $500.00</del><br>Now $295.00</div> </div> </section> <!-- ******************************************** THIS ENDS THE "ON SALE" TAB DATA ******************************************** --> <!-- ******************************************** THIS STARTS THE "NEW ARRIVALS" TAB DATA ******************************************** --> <section id="content2"> New Arrivals <!-- Load JQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Load JSON file and output it--> <script> $(function() { // Put gearList element and JSON file location into a variable var gearList = $("#gearList"); var url = "json/new-arrivals.json"; // Get the JSON file $.getJSON(url, function(data) { // Put New Arrival info into a variable var newArrivals = data.newArrivals.map(function(item) { return "<div style='border: 1px solid #ddd; padding: 5px; min-height: 126px;'><div style='float:left; padding: 5px;'><img src='" + item.image + "'></div><div style='margin: 5px;'><b>" + item.title + "</b><br>" + item.description + "<br> <a href='" + item.url + "'>" + item.url + "</a> </div></div>"; }); // Format newArrivals with HTML tags var content = newArrivals.join(); var list = $("<ul class='json'>").html(content); gearList.append(list); }); }); </script> <!-- The output appears here --> <div id="gearList"></div> </section> <!-- ******************************************** THIS ENDS THE "NEW ARRIVALS" TAB DATA ******************************************** --> <!-- ******************************************** THIS STARTS THE "SIGN UP" TAB DATA ******************************************** --> <section id="content3"> <b>New Account</b> <form action="#"> First Name: <input type="text" size="35" name="firstname"> <br><br> Last Name: <input type="text" size="35" name="lastname"> <br><br> email Address: <input type="text" size="35" name="email"> <br><br> Password: <input type="password" size="35" name="password"> <br><br> Communication Method: <select style="width: 278px;"> <option value="email">email</option> <option value="phone">Phone</option> <option value="smoke">Smoke Signals</option> <option value="telegraph">Telegraph</option> </select> <br><br> Birthday: <select> <option value="email">Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <select> <option value="email">Day</option> <option value='01'>01</option> <option value='02'>02</option> <option value='03'>03</option> <option value='04'>04</option> <option value='05'>05</option> <option value='06'>06</option> <option value='07'>07</option> <option value='08'>08</option> <option value='09'>09</option> <option value='10'>10</option> <option value='11'>11</option> <option value='12'>12</option> <option value='13'>13</option> <option value='14'>14</option> <option value='15'>15</option> <option value='16'>16</option> <option value='17'>17</option> <option value='18'>18</option> <option value='19'>19</option> <option value='20'>20</option> <option value='21'>21</option> <option value='22'>22</option> <option value='23'>23</option> <option value='24'>24</option> <option value='25'>25</option> <option value='26'>26</option> <option value='27'>27</option> <option value='28'>28</option> <option value='29'>29</option> <option value='30'>30</option> <option value='31'>31</option> </select> <br><br> <input type="submit" value="Create Account"> </form> </section> <!-- ******************************************** THIS ENDS THE "SIGN UP" TAB DATA ******************************************** --> </main> </main><!-- CONTENT --> </div><!-- CONTAINER --> <!-- ******************************************** THIS CONTAINS THE RIGHT-HAND NAVIGATION ******************************************** --> <aside class="right-sidebar"> <div class="sidenav"> <a href="#">Link 1</a> <button class="dropdown-btn">Link 2 </button> <div class="dropdown-container"> <a href="#">SubLink 1</a> <a href="#">SubLink 2</a> <a href="#">SubLink 3</a> </div> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> </aside><!-- RIGHT-SIDEBAR --> </div><!-- MIDDLE --> <footer> Copyright &copy; Guitar Center, Inc. </footer> </div><!-- WRAPPER --> <!-- ******************************************** THIS CONTAINS THE RIGHT-HAND NAVIGATION JAVASCRIPT AND MUST BE LOADED AT THE END OF THE PAGE ******************************************** --> <script src="js/dropdown-script.js"></script> </body> </html>



PART 20 - LESSON B - XML PAGE

<!DOCTYPE html> <html> <head> <title>Guitar Center, Inc. / Front End Web Developer Code Assessment</title> <link href="styles/main-stylesheet.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta charset="UTF-8"> </head> <body> <!-- **************************************************************************************************** Guitar Center, Please note, I made two different versions of these test pages. I did one which followed the instructions and uses JSON and JQUERY. I also made a PHP version which parses an XML file. I figured you'd appreciate seeing two different versions, so you can see my use of different technologies to tackle the same issue. To the end-user, each page looks identical. But, the PHP version has the advantage of being simpler code, plus it displays actual HTML in the browser. Thanks for checking it out! - Eric Muss-Barnes *************************************************************************************************** --> <div class="wrapper"> <header class="header"> <ul> <li class="dropdown"> <a href="#" class="dropbtn">Guitars</a> <div class="dropdown-content"> <a href="#">Electric Guitars</a> <a href="#">Acoustic Guitars</a> <a href="#">Acoustic-Electric Guitars</a> <a href="#">Classic Guitars</a> </div> </li> <li><a href="#">Bass</a></li> <li><a href="#">Drums</a></li> <li><a href="#">Keyboards</a></li> <li><a href="#">DJ & Lighting</a></li> <li><a href="#">Used Gear</a></li> <li><a href="#">Clearance</a></li> </ul> </header> <div class="middle"> <div class="container"> <main class="content"> <div class="tooltip"><img src="images/main.jpg" class="mainimage"> <span class="tooltiptext"><b style="text-align: center;">New Guitars</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis laoreet odio, sit amet rutrum ligula aliquet vitae. Phasellus venenatis rhoncus tortor at cursus. Duis et porttitor diam, sodales placerat lectus. </span> </div> <br> <main> <input id="tab1" type="radio" name="tabs" checked> <label for="tab1">On Sale</label> <input id="tab2" type="radio" name="tabs"> <label for="tab2">New Arrivals</label> <input id="tab3" type="radio" name="tabs"> <label for="tab3">Sign Up</label> <!-- ******************************************** THIS STARTS THE "ON SALE" TAB DATA ******************************************** --> <section id="content1"> HEADLINER DEALS <div class="headlinerrow"> <div class="headlinercolumn"><img src="images/product1.jpg"><br>Name of this Instrument<br><del style="color:red;">Was $500.00</del><br>Now $295.00</div> <div class="headlinercolumn"><img src="images/product2.jpg"><br>Name of this Instrument<br><del style="color:red;">Was $500.00</del><br>Now $295.00</div> <div class="headlinercolumn"><img src="images/product3.jpg"><br>Name of this Instrument<br><del style="color:red;">Was $500.00</del><br>Now $295.00</div> </div> </section> <!-- ******************************************** THIS ENDS THE "ON SALE" TAB DATA ******************************************** --> <!-- ******************************************** THIS STARTS THE "NEW ARRIVALS" TAB DATA ******************************************** --> <section id="content2"> New Arrivals <!-- Notice in this version, when you parse an XML file with PHP, it writes actual HTML code to the page so you will get better SEO rankings... --> <?php // SPECIFY URL OF XML FILE $url = "includes/new-arrivals.xml"; // GET XML FILE CONTENTS $xml = simplexml_load_file($url); // LOOP BEGINS foreach($xml->newarrival as $newarrival) { echo "<div style='border: 1px solid #ddd; padding: 5px; min-height: 126px;'><div style='float:left; padding: 5px;'>"; echo "<img src='".$newarrival->image."'></div>"; echo "<div style='margin: 5px;'><b>".$newarrival->title."</b><br>".$newarrival->description."<br> <a href='".$newarrival->url."'>".$newarrival->url."</a>"; echo "</div></div>"; } // LOOP ENDS ?> </section> <!-- ******************************************** THIS ENDS THE "NEW ARRIVALS" TAB DATA ******************************************** --> <!-- ******************************************** THIS STARTS THE "SIGN UP" TAB DATA ******************************************** --> <section id="content3"> <b>New Account</b> <form action="#"> First Name: <input type="text" size="35" name="firstname"> <br><br> Last Name: <input type="text" size="35" name="lastname"> <br><br> email Address: <input type="text" size="35" name="email"> <br><br> Password: <input type="password" size="35" name="password"> <br><br> Communication Method: <select style="width: 278px;"> <option value="email">email</option> <option value="phone">Phone</option> <option value="smoke">Smoke Signals</option> <option value="telegraph">Telegraph</option> </select> <br><br> Birthday: <select> <option value="email">Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <select> <option value="email">Day</option> <option value='01'>01</option> <option value='02'>02</option> <option value='03'>03</option> <option value='04'>04</option> <option value='05'>05</option> <option value='06'>06</option> <option value='07'>07</option> <option value='08'>08</option> <option value='09'>09</option> <option value='10'>10</option> <option value='11'>11</option> <option value='12'>12</option> <option value='13'>13</option> <option value='14'>14</option> <option value='15'>15</option> <option value='16'>16</option> <option value='17'>17</option> <option value='18'>18</option> <option value='19'>19</option> <option value='20'>20</option> <option value='21'>21</option> <option value='22'>22</option> <option value='23'>23</option> <option value='24'>24</option> <option value='25'>25</option> <option value='26'>26</option> <option value='27'>27</option> <option value='28'>28</option> <option value='29'>29</option> <option value='30'>30</option> <option value='31'>31</option> </select> <br><br> <input type="submit" value="Create Account"> </form> </section> <!-- ******************************************** THIS ENDS THE "SIGN UP" TAB DATA ******************************************** --> </main> </main><!-- CONTENT --> </div><!-- CONTAINER --> <!-- ******************************************** THIS CONTAINS THE RIGHT-HAND NAVIGATION ******************************************** --> <aside class="right-sidebar"> <div class="sidenav"> <a href="#">Link 1</a> <button class="dropdown-btn">Link 2 </button> <div class="dropdown-container"> <a href="#">SubLink 1</a> <a href="#">SubLink 2</a> <a href="#">SubLink 3</a> </div> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> </aside><!-- RIGHT-SIDEBAR --> </div><!-- MIDDLE --> <footer> Copyright &copy; Guitar Center, Inc. </footer> </div><!-- WRAPPER --> <!-- ******************************************** THIS CONTAINS THE RIGHT-HAND NAVIGATION JAVASCRIPT AND MUST BE LOADED AT THE END OF THE PAGE ******************************************** --> <script src="js/dropdown-script.js"></script> </body> </html>

From studying those two examples, can you spot the problems?

The XML example parses data from a file and writes actual HTML code, so when you view the sourcecode, all the data is there.

The JSON example parses data from a file and uses JavaScript to print the results in the DOM, so when you view the sourcecode, no data is there.

I know I have cited these concepts before, but it's important to understand, because JavaScript has become so trendy, and is so often utilized poorly. I'm a big fan of JavaScript. I'm not against using it. There are times when JavaScript offerers the best, simplest solution to technological problems. But using it for everything is a mistake. And you don't want to create mistaken projects of little value.

And remember, kids, the world owes you nothing... until you create things of value.

Glossary

JSON

JSON is an acronym for "JavaScript Object Notation" and is simply a type of text file containing data for JavaScript to parse. Similar to an XML file being parsed by other languages like PHP.

Downloads

Other Articles