title: Reading JSON in html
body: <p>what I'm trying to do should be pretty simple but somehow  I just don't get it work? </p>
  
  <p>so I have the following JSON file  <code>jsonFile.json</code> : </p>
  
  <pre><code>{
      "level1":"elemet1",
      "level2":"element2",
      "level3":{
          "testing":"element3"
      }
  }
  </code></pre>
  
  <p>And I want to access the data in it, using and HTML page like this one <code>index.html</code>: </p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset='utf-8'&gt;
  
      &lt;title&gt;JSON Example&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="data1"&gt;Level 1 value :  &lt;/div&gt;    
      &lt;div id="data2"&gt;Level 2 value :  &lt;/div&gt; 
      &lt;div id="data3"&gt;Level 3 value :  &lt;/div&gt; 
  
  
  
  
  
      &lt;script&gt;
          function loadJSON(callback) {   
  
          var xobj = new XMLHttpRequest();
              xobj.overrideMimeType("application/json");
          xobj.open('GET', 'jsonFile.json', true); // Replace 'my_data' with the path to your file
          xobj.onreadystatechange = function () {
                if (xobj.readyState == 4 &amp;&amp; xobj.status == "200") {
                  // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                  callback(xobj.responseText);
                }
          };
          xobj.send(null);  
          }
  
          function init() {
  
           loadJSON(function(response) {
            // Parse JSON string into object
              var actual_JSON = JSON.parse(response); 
  
              for (var key in actual_JSON) {
                  var innerkey = actual_JSON[key];
                  for (var inner in innerkey) {
                       document.getElementById('data1').innerHTML += 'Level 1 value'+innerkey[inner]['level1']+'&lt;br&gt;';
                       document.getElementById('data2').innerHTML += 'Level 2 value: '+innerkey[inner]['level2']+'&lt;br&gt;';
                       document.getElementById('data2').innerHTML += 'Level 3 value: '+innerkey[inner]['level3']+'&lt;br&gt;';
                  }   
              }   
           }); 
          }
          init();
          &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>so calling the "index.html" from the browser directly delivers the following error :</p>
  
  <pre><code>Access to XMLHttpRequest at 'file:///C:/Users/Engine/Documents/JSON_TEST/jsonFile.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, https.
  loadJSON @ index.html:31
  </code></pre>
  
  <p>to solve it I'm using now a <code>node.js</code>server <code>app.js</code> : </p>
  
  <pre><code>    var http = require('http');
  var fs =require('fs');
  
  
  var server = http.createServer(function(req,res){
      console.log('request was made : '+req.url);
      res.writeHead(200,{'Content-Type':'text/html'});
      var myReadStream  = fs.createReadStream(__dirname +'/index.html','utf8');
      myReadStream.pipe(res);
  });
  
  server.listen('3000','127.0.0.1');
  
  console.log('listening to 3000');
  </code></pre>
  
  <p>So now calling the <code>app.js</code> using :</p>
  
  <pre><code>node app.js
  </code></pre>
  
  <p>and calling  the address : 127.0.0.1:3000</p>
  
  <p>here  is the error I get: </p>
  
  <pre><code>Uncaught SyntaxError: Unexpected token &lt; in JSON at position 0
  at JSON.parse (&lt;anonymous&gt;)
  at (index):38
  at XMLHttpRequest.xobj.onreadystatechange ((index):28)
  </code></pre>
  
  <p>So again, I guess it should be simple, but I just don't what I'm missing here! 
  thanks in advance for any help ! </p>