4

All I'm trying to do is access the contents of a json file and display them to a web page. But I'm getting this error:

Access to XMLHttpRequest at 'file:///C:/Users/bobal/Documents/htmlTry/myData.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

The JSON file and the HTML file are all in the same folder.

Here is my html page:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script>

    $(function() {


   var people = [];

   $.getJSON('Assets/myData.json', function(data) {
       $.each(data.person, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" +
           "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
     });

   });

});
</script>
</head>

<body>

<div class="wrapper">
<div class="profile">
   <table id= "userdata" border="2">
  <thead>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>City</th>
        </thead>
      <tbody>

       </tbody>
   </table>

</div>
</div>

</body>
</html>

And here is the JSON file, myData.json:

{
    "person": [
        {
            "firstName": "Clark",
            "lastName": "Kent",
            "job": "Reporter",
            "roll": 20
        },
        {
            "firstName": "Bruce",
            "lastName": "Wayne",
            "job": "Playboy",
            "roll": 30
        },
        {
            "firstName": "Peter",
            "lastName": "Parker",
            "job": "Photographer",
            "roll": 40
        }
    ]
 }

I really don't understand the issue, but if I'm going about this all wrong could someone show me a better way to do this?

Cole Perry
  • 333
  • 1
  • 5
  • 27
  • Do you have a back end of some sort? – Algo7 Apr 21 '20 at 01:40
  • No, I was wondering if that might be an issue but I forgot to mention it. But, for what I'm trying to do I can't really have any kind of backend. I'm limited to JS, HTML, and CSS. – Cole Perry Apr 21 '20 at 01:41
  • 1
    So pure html,css, and js.There are no frameworks like nodejs / react /angular? – Algo7 Apr 21 '20 at 01:43
  • No, I'm taking a beginner web dev class because I needed extra hours. I know how to access like external API's and handle the returned JSON object in node or dotNet or something but I'm having trouble doing it bare bones like this – Cole Perry Apr 21 '20 at 01:52
  • Don't get me wrong. I was just trying to make sure there is no other frameworks causing th problem. – Algo7 Apr 21 '20 at 01:56

1 Answers1

2

So when you call $.getJSON() you are actually executing an GET call as described in the JQuery docs here. https://api.jquery.com/jQuery.getJSON/ Because of that the browser will enforce CORS, even if you are using the file protocol.

To load the file directly and get around that issue, you can use the Files API in HTML5. The below link gives a good walk through of reading the file data into memory, and then it's just a matter of converting the data into the format you are looking for, in this case JSON.

https://www.html5rocks.com/en/tutorials/file/dndfiles/

I would guess that the easiest option would be to use readAsText() then use vanilla JS to parse it to JSON. Hope this helps!

Jack Barger
  • 214
  • 1
  • 4
  • 1
    Well this did point me in the right direction but to be honest I feel like this might be a little over my head. I'm not exactly sure how to apply what he is doing to my code. – Cole Perry Apr 21 '20 at 02:19