I am populating html table with Json Data from Internet server and also I have json file with name example.json placed inside same folder where index.html is placed. I would like to load json file and populate the html table from Online Server if Internet is available and also overwrite the previous data from example.json file if there is new changes in json file in server and load from local storage when Internet is not available.
Ps: I have added all the library of css and js inside the same directory also.
So Far I'm using below code for my html
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1>Json</h1>
<br/>
<table class="table table-bordered table-striped" id="employee_table">
<tr>
<th>Class</th>
<th>Time</th>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function() {
var employee_data = '';
if (localStorage.myJSON !== undefined) {
var myJSON = JSON.parse(localStorage.myJSON);
employee_data += '<tbody>';
$.each(myJSON, function(key, value) {
employee_data += '<tr>';
employee_data += '<td>' + value.class + '</td>';
employee_data += '<td>' + value.time + '</td>';
employee_data += '</tr>';
});
employee_data += '</tbody>';
$('#employee_table').append(employee_data);
}
employee_data = '';
$.getJSON("https://api.myjson.com/bins/8qktd", function(data) {
$("#yourtableid tbody").remove();
localStorage.setItem(myJSON, JSON.stringify(data));
$.each(data, function(key, value) {
employee_data += '<tr>';
employee_data += '<td>' + value.class + '</td>';
employee_data += '<td>' + value.time + '</td>';
employee_data += '</tr>';
});
$('#employee_table').append(employee_data);
});
});
</script>and my Json File is
var myJSON= [
{
"id":"1",
"time":"10-15",
"class":"John Smith"
},
{
"id":"2",
"time":"10-15",
"class":"John Smith"
},
{
"id":"3",
"time":"10-15",
"class":"John Smith"
},
{
"id":"4",
"time":"10-15",
"class":"John Smith"
},
{
"id":"5",
"time":"10-15",
"class":"John Smith"
},
{
"id":"6",
"time":"10-15",
"class":"John Smith"
},
{
"id":"7",
"time":"10-15",
"class":"John Smith"
},
{
"id":"8",
"time":"10-15",
"class":"John Smith"
},
{
"id":"9",
"time":"10-15",
"class":"John Smith"
},
{
"id":"10",
"time":"10-15",
"class":"John Smith"
},
{
"id":"11",
"time":"10-15",
"class":"John Smith"
},
{
"id":"12",
"time":"10-15",
"class":"John Smith"
}
]and next thing is place a button which OnClick will getJson file from server and compare with local storage, and if Both are same then display message box with text " your Data is upto Date" else show " Please update your Table and show a update button on message box , which will refresh the page thus will load the table with new data and also overwrite the old data in local storage"
Is is possible, I'm expecting impossible.
Any help??
