Created
July 4, 2014 20:38
-
-
Save dacur/3a13be7fc9782d185658 to your computer and use it in GitHub Desktop.
Dynamically add JSON elements to HTML using jQuery.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function () { | |
| $.getJSON('../data/employees.json', function (data) { | |
| var statusHTML = '<ul class="bulleted">'; | |
| $.each(data,function (index, employee) { | |
| if (employee.inoffice === true) { | |
| statusHTML +='<li class="in">'; | |
| } else { | |
| statusHTML +='<li class="out">'; | |
| } | |
| statusHTML += employee.name + '</li>'; | |
| }); | |
| statusHTML += '</ul>'; | |
| $('#employeeList').html(statusHTML) | |
| }); // end getJSON | |
| $.getJSON('../data/rooms.json', function (data) { | |
| var statusHTML = '<ul class="rooms">'; | |
| $.each(data,function (index, room) { | |
| if (room.available === true) { | |
| statusHTML +='<li class="empty">'; | |
| } else { | |
| statusHTML +='<li class="full">'; | |
| } | |
| statusHTML += room.room + '</li>'; | |
| }); | |
| statusHTML += '</ul>'; | |
| $('#roomList').html(statusHTML) | |
| }); // end getJSON | |
| }); // end ready | |
| //Code below uses JS and is more verbose. | |
| var xhr = new XMLHttpRequest(); | |
| xhr.onreadystatechange = function(){ | |
| if(xhr.readyState === 4){ | |
| var employees = JSON.parse(xhr.responseText); | |
| var statusHTML = '<ul class="bulleted">'; | |
| for (var i=0; i<employees.length; i++){ | |
| if (employees[i].inoffice === true){ | |
| statusHTML += '<li class="in">'; | |
| } else { | |
| statusHTML += '<li class="out">'; | |
| } | |
| statusHTML += employees[i].name; | |
| statusHTML += '</li>'; | |
| } | |
| statusHTML += '</ul>'; | |
| document.getElementById('employeesList').innerHTML = statusHTML; | |
| }; | |
| xhr.open('GET', 'data/employees.json'); //normally would not read text file | |
| //but instead server-side script would get json from source dynamically | |
| xhr.send(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>AJAX Office Status Widget</title> | |
| <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" href="css/main.css"> | |
| <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script src="js/widget.js"></script> | |
| </head> | |
| <body> | |
| <div class="grid-container centered"> | |
| <div class="grid-100"> | |
| <div class="contained"> | |
| <div class="grid-100"> | |
| <div class="heading"> | |
| <h1>Corporate Intranet</h1> | |
| </div> | |
| </div> | |
| <section class="grid-70 main"> | |
| <h2>Lorem Ipsum Headline</h2> | |
| <p></p> | |
| <p></p> | |
| <p></p> | |
| </section> | |
| <aside class="grid-30 list"> | |
| <h2>Meeting Rooms</h2> | |
| <div id="roomList"> | |
| </div> | |
| <h2>Employee Office Status</h2> | |
| <div id="employeeList"> | |
| </div> | |
| </aside> | |
| <footer class="grid-100"> | |
| <p>Copyright, The Intranet Corporation</p> | |
| </footer> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ul.bulleted .in { | |
| color: #5A6772; | |
| } | |
| ul.bulleted .in:before { | |
| content: "IN"; | |
| background-color: #5fcf80; | |
| } | |
| ul.bulleted .out { | |
| color: #A7B4BF; | |
| } | |
| ul.bulleted .out:before { | |
| content: "OUT"; | |
| background-color: #ed5a5a; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment