0

I'm using Json Data to populate my Html Table with list of Details. I have json file called example.json inside the same directory as index.html page is. But It dosen't show / read json file when I add "example.json" in below code but works perfectly fine when I load online url. I would like to populate the Table with Json File from local storage and when online overwrite the previous Data of example.json with new Data if there is any automatically.

Here is my HTML

<!DOCTYPE html>
<html>
<head>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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(){
 $.getJSON("https://api.myjson.com/bins/8qktd", function(data){
 var employee_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>

a

[

    {
    "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"
}

]

Any help would be really much appreciated. I already looked for solution , but found nowhere.

BlueYeti24
  • 45
  • 1
  • 8
  • use local web servers like xampp to host your site. it is good practice and it will fix these type of issues as well. – Baba Khedkar Oct 14 '17 at 17:07
  • At which browser are you trying code? – guest271314 Oct 14 '17 at 17:09
  • I am using it on google chrome and later on I'm planning to use it in android Webview. – BlueYeti24 Oct 14 '17 at 17:14
  • @BlueYeti24 See [Using File System as source of videos for playing offline](https://stackoverflow.com/questions/44849531/using-file-system-as-source-of-videos-for-playing-offline) – guest271314 Oct 14 '17 at 17:14
  • @guest271314, I really appreciate your efforts, but for now I'm trying to make it work in desktop browser then only I'd be moving into webview. For now , I"m having problem and can't figure out how to load the json file offline ( online works all great ) but when I cut off internet , it displays no data. – BlueYeti24 Oct 14 '17 at 17:22
  • @BlueYeti24 One option is to embed the `JSON` within the HTML and check if the browser is online, if the browser is online call `$.getJSON()`, else parse the `JSON` to a JavaScript object and process the data. – guest271314 Oct 14 '17 at 17:23
  • @guest271314, well, then how to update the Data when online if I wish to change the Data then and load the updated data when user is offline next time. – BlueYeti24 Oct 14 '17 at 17:26
  • @BlueYeti24 You would need to `POST` the updated data to server and embed the updated `JSON` in HTML. – guest271314 Oct 14 '17 at 17:28
  • @guest271314, and How can I do that?? I'm very new to scripts and code, everything I learned so far is from tutorials and youtube videos. It would be mena a lot to me , if you could edit the above code and post the working solution of how it could be done. – BlueYeti24 Oct 14 '17 at 17:33

1 Answers1

0

You can embed JSON in HTML, for example at a data-* attribute. If navigator.onLine get JSON from server modify HTML and to reflect updated JSON, else use JSON embedded in HTML. At any point during the procedure you can save the HTML with the same file name as existing HTML document to update the embedded data-* within HTML.

<!doctype html>
<html data-json='[{"id":"1","time":"10-15","class":"John Smith"}]'>

<head>
  <script>
    onload = () => {
      if (!navigator.onLine) {
        let json = document.documentElement.dataset.json;
        let data = JSON.parse(json);
        // do stuff with `data`
        console.log(data);
      } else {
        fetch("https://api.myjson.com/bins/8qktd")
          .then(response => response.json())
          .then(res => {
            console.log(res);
            // update HTML at at server to set `data-json` at `<html>`
            /*
            fetch("/path/to/server", {method:"POST", body:JSON.stringify(res)})
            .then(response => response.ok)
            .then(res => {
              console.log(res);
              document.documentElement.dataset.json = JSON.stringify(res);
              // download updated HTML
              const a = document.createElement("a");
              a.download = "file.html";
              a.href = URL.createObjectURL(new Blob([doucment.documentElement.outerHTML]));
              document.body.appendChild(a);
              a.click(); // download updated HTML with same file name
            })
            .catch(err => console.error(err));
            */
          });

      }
    }
  </script>
</head>

</html>
guest271314
  • 1
  • 15
  • 104
  • 177
  • and How should I combine the solution you provided with my script tag ? will it then overwrite the previous Data when user is online and if json file is populate with new information and load same update data then after. when they go offline – BlueYeti24 Oct 14 '17 at 17:51
  • @BlueYeti24 As described in Answer you will need to download the updated HTML file with the same file name, which will include updated `JSON` embedded in HTML at the `data-*` attribute or other means of embedding data within HTML. HTML is stateless; that is, you will need to manually adjust the HTML, either client side of at server to reflect the changes made. – guest271314 Oct 14 '17 at 17:53
  • well I really appreciate your efforts, but It is not what I was looking for , It is impossible to update entire html ..I was looking to populate the html table with json initially embedded within same directory and when user comes online and if the data is altered then replace the previous json with new data and load the new updated data onwards when he/she is online or offline untill next change in Json from server side. – BlueYeti24 Oct 14 '17 at 17:59
  • @BlueYeti24 One issue, as indicated at previous comment, is that HTML is stateless. Also, `file:` protocol is different from `http:` or `https:` protocol; `localStorage` is stored at the exact same domain, you cannot access `localStorage` stored at `https:` protocol from `file:` protocol. Another option would be to use `ServiceWorker`, see [Service Worker Sample: Custom Offline Page Sample](https://googlechrome.github.io/samples/service-worker/custom-offline-page/). – guest271314 Oct 14 '17 at 18:03
  • @BlueYeti24 Not sure why you cannot save the entire HTML? See [Edit, save, self-modifying HTML document; format generated HTML, JavaScript](https://stackoverflow.com/q/30563157/) – guest271314 Oct 14 '17 at 18:05