1

can someone please help me to fix this? i am not sure what is wrong with the code

i have a simple JSON and i need to get these data as Bootstrap tables.

JSON file is like this :

[
{
    "telephoneNumber": "03-7946 2800",
    "isoCountryCode": "BN",
    "line3": "Bandar Seri Begawan",
    "cityName": "Brunei",
    "line2": "Kampung Kiulap",
    "line1": "6 & 7, Block A, Kompleks Shakirin",
    "careOfName": "",
    "state": "BR",
    "emailAddress": "vhwzezgj@rzrcy.bmh",
    "postalCode": "BE1518",
    "id": "8804188225559"
    },
    {
    "telephoneNumber": "5494492",
    "isoCountryCode": "BN",
    "line3": "GADONG",
    "line4": "8171571",
    "cityName": "BDR SERI BEGAWAN",
    "line2": "KAMPONG RIMBA",
    "line1": "5 SIMPANG 12-32",
    "careOfName": "",
    "state": "BR",
    "emailAddress": "vhwzezgj@rzrcy.bmh",
    "postalCode": "BE3119",
    "id": "8802223521815"
    },
    ]

i wrote a html code like this

       <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    

    <title>Hello, world!</title>
  </head>
  <body>
    
    <p><br></p>

    <div class="container">
      <table class="table table-bordered table-striped table-hover">
         <thead>
            <tr>
              <th>telephoneNumber</th>
              <th>isoCountryCode</th>
              <th>line3</th>
              <th>cityName</th>
              <th>line2</th>
              <th>line1</th>
              <th>careOfName</th>
              <th>state</th>
              <th>emailAddress</th>
              <th>postalCode</th>
              <th>id</th>

            </tr>

          </thead>
          <tbody></tbody>



      </table>

    </div>
    

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
       <script >
      $.getJSON("data.json",function(data){
        var items=[];
        $.each(data,function(key,val){
          items.push("<tr>");
          items.push("<td id='" + key+" '>"+val.telephoneNumber+"</td>");
          items.push("<td id='" + key+" '>"+val.isoCountryCode+"</td>");
          items.push("<td id='" + key+" '>"+val.line3+"</td>");
          items.push("<td id='" + key+" '>"+val.cityName+"</td>");
          items.push("<td id='" + key+" '>"+val.line2+"</td>");
          items.push("<td id='" + key+" '>"+val.line1+"</td>");
          items.push("<td id='" + key+" '>"+val.careOfName+"</td>");
          items.push("<td id='" + key+" '>"+val.state+"</td>");
          items.push("<td id='" + key+" '>"+val.emailAddress+"</td>");
          items.push("<td id='" + key+" '>"+val.postalCode+"</td>");
          items.push("<td id='" + key+" '>"+val.id+"</td>");
          items.push("</tr>");

       });

        $("<tbody/>",{html:items.join("")}).appendTo("table");


       })

</script>
  
</body>
</html>

When i run the page, i could see the data is not populating to Bootstrap Tables. Not sure why. can someone please help? I am sitting with this code since Friday but not able to fix it

binu456m
  • 61
  • 11
  • @Phil i have changed . to , but still i am getting only table headers as results. not getting JSON data into the table – binu456m Jun 29 '20 at 04:42
  • I am getting these errors : Access to XMLHttpRequest at 'file:///C:/Users/BINU/Desktop/zzzzz/data.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. data.json:1 Failed to load resource: net::ERR_FAILED – binu456m Jun 29 '20 at 04:50
  • 1
    Does this answer your question? [“Cross origin requests are only supported for HTTP.” error when loading a local file](https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local) – Phil Jun 29 '20 at 04:54
  • 1
    You also have too many copies of jQuery still. Remove the _slim_ one and move the other one up above Bootstrap and Popper – Phil Jun 29 '20 at 04:55
  • I have made necessary changes in the code. when i run console now i get below errors Failed to load resource: net::ERR_FAILED from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. – binu456m Jun 29 '20 at 05:38
  • Thanks Phil. I have fixed CORS error. i ran the webpage into python http server. Thanks Alot – binu456m Jun 29 '20 at 08:18

0 Answers0