jsonが読み込まれないのはなぜですか？

Question

これはこれはhandlebars.js を使用してロードするJSONファイルとスクリプトのコードですが、このコードはJSONファイルをロードしない理由を知らない私のhtmlファイル（index.htmlを）

です。

 <div class="container"> 
       <div class="jumbotron"> 
         <div class="page-wrap"> 
         <div id="data-container"></div> 
        </div> 
       </div> 
     </div> 

    <script id="dataTemplate" type="text/x-handlebars-template"> 
     {{#each hospitals}} 
      <h2>{{name}}</h2> 
     {{/each}} 
     </script> 
     <script src="../js/handlebars-v4.0.5.js"></script> 
     <script src="../js/main.js"></script> 

これはこれはhandlebars.js を使用してロードするJSONファイルとスクリプトのコードですが、このコードはJSONファイルをロードしない理由を知らない私のjsファイル（main.js）

です。

 var ourRequest = new XMLHttpRequest(); 
    ourRequest.open('GET','file:///C:/Users/SUBHAJIT/Desktop/Workspace/Medi-Web/WebContent/js/medi-web.json'); 
    ourRequest.onload = function() { 
     if (ourRequest.status >= 200 && ourRequest.status < 400) { 
      // This is where we'll do something with the retrieved data 
      var data = JSON.parse(ourRequest.responseText); 
      createHTML(data); 
     } else { 
      console.log("We connected to the server, but it returned an error."); 
     } 
    }; 

    ourRequest.onerror = function() { 
     console.log("Connection error"); 
    }; 
    ourRequest.send(); 

    function createHTML(hospitalData) { 
     var rawTemplate = document.getElementById("dataTemplate").innerHTML; 
     var compileTemplate = Handlebars.compile(rawTemplate); 
     var ourGeneratedHTML = compileTemplate(hospitalData); 
     var dataContainer = document.getElementById("data-container"); 
     dataContainer.innerHTML = ourGeneratedHTML; 
    }` 

そして、これは、これらが常に接続エラーを表示しますが、私は知らない理由をどのように解決するために私を助けてください、私のJSONファイル（MEDI-web.json）

 { 
     "hospitals": [ 
     { 
      "name": "Apollo Hospital", 
      "ratings" : "four star", 
      "images": "../resources/images/apollo.jpg" 
     }, 

     { 
      "name": "Amri Hospital", 
      "ratings" : "two star", 
      "images": "../resources/images/apollo.jpg" 
     }, 

     { 
      "name": "Fortis Hospital", 
      "ratings" : "three star", 
      "images": "../resources/images/apollo.jpg" 
     } 
     ] 
    } 

のですか？これらは、handlebars.js を使用してjsonファイルとスクリプトをロードするためのコードですが、私のコードがjsonファイルをロードしていない理由はわかりません。

Answer 1

セキュリティ上の理由から、ローカルファイルはサーバーなしではロードされません。

多くの古いブラウザがロードローカルjsonファイルをサポートしている場合があります。

Apacheなどのローカルサーバーの下にファイルを置いてから、ajax load jsonファイルを試す必要があります。

xhr.open("GET", "http://www.example.org/example.json"); 
xhr.open("GET", "http://127.0.0.1/example.json");