Trouble loading data from JSON file into HTML table with js function

Question

The title says it all, I'm struggling to get data from a json file to an HTML table using a js function with jquery, but the data from the json file isn't loading onto the table. I'm also using bootstrap. I got the error Access to XMLHttpRequest at 'file:///C:/Users/Nuno/Desktop/my%20shit/Faculdade/ITW/trabalho%20lab/info.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

JSON:

[
    {"Age": "18", "Email": "[email protected]", "Phone": "123456789", "Adress": "Lisbon", "Languages": "English, Portuguese, (Limited) Spanish"}
]

JS:

    $(document).ready(function(){
  $.getJSON("info.json", function(data){
    var mydata = '';
    $.each(data, function(key,value){
      mydata += '<tr>';
      mydata+= '<td>'+value.age+'</td>';
      mydata+= '<td>'+value.email+'</td>';
      mydata+= '<td>'+value.phone+'</td>';
      mydata+= '<td>'+value.adress+'</td>';
      mydata+= '<td>'+value.languages+'</td>';
      mydata += '</tr>';
    });
    $('#personalInfo').append(mydata);
  });
  });

HTML:

<div class="table-responsive">
          <table class="table table-bordered table-striped" id="personalInfo"> 
              <tr> 
                <th> 
                  Age
                </th> 
                <th> 
                  Email 
                </th> 
                <th> 
                  Phone 
                </th> 
                <th> 
                  Adress
                </th> 
                <th> 
                  Languages
                </th> 
              </tr> 
          </table> 
        </div>

Looks like you're lower-casing your keys but the keys in the json are sentence-case — Dominik
– Dominik, Commented Dec 13, 2020 at 20:58
Your issue is CORS. Make sure you edit your question and include this error. — Dominik
– Dominik, Commented Dec 13, 2020 at 21:27
Well you can override chrome security settings. You can also install a CORS extension. In general localhost is safest long term. A web search for all alternatives should quickly get results — charlietfl
– charlietfl, Commented Dec 13, 2020 at 21:33

Renato Sant'Anna · Accepted Answer · 2020-12-13 21:39:58Z

2

I'm guessing you're using Chrome. There's a restriction in Chrome on accessing any files via xhr requests starting with file: //.

There's more info here http://www.google.com/support/forum/p/Chrome/thread?tid=171316324d16747b&hl=en

Suggestion:

If you are using Google Chrome, it is intentional that AJAX on file:/// paths never works.

crbug/40787

answered Dec 13, 2020 at 21:39

Renato Sant'Anna

4582 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

suRGE · Accepted Answer · 2020-12-13 21:38:39Z

0

Thanks to all the help, if you ever have this issue check your console. If you get the error "Access to XMLHttpRequest at 'file:///C:/Users/Nuno/Desktop/my%20shit/Faculdade/ITW/trabalho%20lab/info.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https." The problem isn't the code. I managed to get it working using the Live Server extension in VS Code.

answered Dec 13, 2020 at 21:38

suRGE

356 bronze badges

Collectives™ on Stack Overflow

Trouble loading data from JSON file into HTML table with js function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related