ローカルJSONファイルを読み込んでいます

322

ローカルJSONファイルをロードしようとしていますが、機能しません。これが私のJavaScriptコードです（jQueryを使用：

var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);

test.jsonファイル：

{"a" : "b", "c" : "d"}

何も表示されず、Firebugはデータが未定義であることを教えてくれます。Firebugで確認できjson.responseText、それは適切で有効ですが、次の行をコピーすると奇妙です。

 var data = eval("(" +json.responseText + ")");

Firebugのコンソールで動作し、データにアクセスできます。

誰かが解決策を持っていますか？

javascript  jquery  json  firebug  local-files 
— パトリック・ブラウン
ソース
JSONすでにJavaScriptオブジェクトを取得している文字列を返す場合、を使用する必要はありませんeval()。
— ヨーダ、2011
1
「ローカル」jsonファイルを何と呼びますか？ブラウザまたはサーバーのローカルですか？
— seppo0010 2011
2
あなたは私たちに十分な詳細を与えていません。ファイルにtest.jsonはパスが指定されていないため、ファイルにアクセスするページの場所に対する相対URIになります。したがって、@ seppo0010のように、ページがリモートサーバーのどこかにある場合はサーバーに対してローカルであり、ページがfile://プロトコルによってアクセスされるローカルファイルシステムにある場合はコンピューターに対して相対的です。
— ヒッピートレイル2012年

回答:

292

$.getJSON 非同期なので、次のようにする必要があります。

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
— seppo0010
ソース
47
ローカルファイルへのアクセスが本当に許可されていますか？
— maasha
3
いいえ、ファイルにすることはできませんが、Webサーバーから提供する必要があります。
— クリスエリクソン2014年
15
正解です。Chromeのセキュリティは、Firefoxや他のものよりもはるかに厳しいです。xhr、Josn、Xmlなどを使用して何かをロードすることは、1つまたは2つのことを除いて、ほとんどすべてChromeでロックダウンされます。
— Shawty 2014年
1
私はこれを試しましたが、運はありませんでした。コンソールにもエラーはありません:(
— Govind Kailas
11
myjson.comを使用してローカルファイルをアップロードし、Chromeブラウザーからアクセスすることをお勧めします。
— 化学プログラマ
167

私は（angularjsアプリをテストするために）同じニーズを持っていて、私が見つけた唯一の方法はrequire.jsを使用することです：

var json = require('./data.json'); //(with path)

注：ファイルは1回読み込まれ、それ以降の呼び出しではキャッシュが使用されます。

nodejsを使用したファイルの読み取りの詳細：http ://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

require.js：http ://requirejs.org/

— エヴィンス
ソース
4
jestでこれを行っている場合は、忘れずに行うjest.dontMock('./data.json');か、結果が空になります。:)そこに誰かのために有用であるかもしれない
— HåvardGeithus
1
このコードのコンテキストは何ですか？あなたは何をしますjsonか？
— Drazen Bjelovuk 2017年
4
完全な例を提供してください：エラーが発生します：has not been loaded yet for context: _. Use require([])
— shaijut
2
requireは、node.jsモジュールであるため、ブラウザでは機能しません。OPがブラウザにロードしたい場合は、フェッチを使用するのが適切なソリューションです。
— sniffingdoggo
1
はい、requireはノード用ですが、requireJSはブラウザーでも使用できます。「RequireJSはJavaScriptファイルおよびモジュールローダーです。ブラウザー内での使用に最適化されていますが、RhinoやNodeなどの他のJavaScript環境で使用できます。 」
— Quested Aronssonによる
97

よりモダンな方法で、Fetch APIを使用できるようになりました。

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

最新のブラウザはすべてFetch APIをサポートしています。（Internet Explorerにはありませんが、Edgeにはあります！）

ソース：

— aloisdgがcodidact.comに移動
ソース
1
Fetch APIを使用する場合、セキュリティ設定を無効にしない限り、ローカルファイルへのアクセスは禁止されていますか？
— LarsH
3
@LarsHどうやらそうです。今朝試してみましたが、fetch apiはfile：//スキームでローカルjsonファイルを読み取ることができません。このアプローチはとてもきれいに見えますが、ローカルファイルには使用できません
— keysl
1
@keyslわかりました。セキュリティ上の理由から、おそらくそのようにする必要があります。（そして、あなたは右、私は「を介してアクセスファイルに禁じことを意味しているfile://。スキーム）しかし、それは素敵なきれいなアプローチである私は、この答えに感謝を使用し始めました。。
— LarsH
フェッチAPIでローカルファイルにアクセスできない
— anton zlydenko
89

ユーザーがローカルのjsonファイル（ファイルシステムの任意の場所）を選択できるようにする場合は、次の解決策が機能します。

FileReaderとJSON.parserを使用します（jqueryは使用しません）。

<html>
<body>

<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">

  <fieldset>
    <h2>Json File</h2>
     <input type='file' id='fileinput'>
     <input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
  </fieldset>
</form>


<script type="text/javascript">

  function loadFile() {
    var input, file, fr;

    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }

    function receivedText(e) {
      let lines = e.target.result;
      var newArr = JSON.parse(lines); 
    }
  }
</script>

</body>
</html>

以下はFileReaderの優れた紹介です：http ://www.html5rocks.com/en/tutorials/file/dndfiles/

— トラウスティクリスティアンソン
ソース
4
FileReader APIはIE 8または9ではサポートされていませんが、他のすべてのブラウザーは問題ありません：caniuse.com/#search=filereader
— northben
Chromeで完璧に動作し、データが表示されますnewArr
— Belter 2017年
jQueryを使用しないため、この回答は素晴らしく、少し異なります。
— DigitalDesignDj
78

あなたが速くて汚い何かを探しているなら、あなたのHTMLドキュメントの先頭にデータをロードするだけです。

data.js

var DATA = {"a" : "b", "c" : "d"};

index.html

<html>
<head>
   <script src="data.js" ></script>
   <script src="main.js" ></script>
</head>
...
</html>

main.js

(function(){
   console.log(DATA); // {"a" : "b", "c" : "d"}
})();

ヒープサイズ（Chromeの場合）は約4GBであるため、データがそれより大きい場合は別の方法を見つける必要があります。別のブラウザを確認したい場合は、次のことを試してください。

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"
— jwerre
ソース
AMDが機能することは正しいですが、AMDがここでの正しいソリューションであるとは思いません。最も簡単なのは$ .getJSONを使用することです。ありがとう
— Patrick Browne
7
@PatrickBrowneはい、getJSONは優れたソリューションですが、多くの場合、クロスドメインの問題（S3からデータをロードするなど）に遭遇することになると思います。
— jwerre
これが最も簡単な解決策であることがわかりました。JSONファイルはほとんど同じに見えるため、余分なものはありません（ファイルの最上部にある "var xyz ="のみ）。コードに大きなデータファイルが必要な人はいません。
— cslotty 2017
これは、多くのレベルで間違っている、私はそれが非常に多くの票を持っているか理解していない、ここでは誰もが見たい多くの場合について説明しcodepen.io/KryptoniteDove/post/...「多くの例は、あなたがAでデータにアクセスすることができるという証拠だろう以下のような単純な関数です。実際、これは実際にはJSONドキュメントをロードせず、JavaScriptオブジェクトを作成しています。この手法は、真のJSONファイルに対しては機能しません。」
— lesolorzanov
1
正直なところ、これは、あらかじめ用意されたデータがあり、静的なページを提供したい場合に最適なソリューションです
— Evan Pu
19

ES5バージョン

function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true);
    // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function() {
        if (xobj.readyState === 4 && 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);
    });
}

ES6バージョン

const loadJSON = (callback) => {
    let xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true);
    // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = () => {
        if (xobj.readyState === 4 && 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);
}

const init = () => {
    loadJSON((response) => {
        // Parse JSON string into object
        let actual_JSON = JSON.parse(response);
    });
}
スニペットを展開

— xgqfrms
ソース
@Pier（Tomcat、Xampp、Jbossなどのローカルアプリケーションサーバーを使用する場合）。スクリプト作業
— Mirko Cianfarani 2017年
@MirkoCianfaraniは、file:///プロトコルを使用しておらず、ファイルがローカルと見なされなくなったためです。
— ピア
@xgqfrms Fetch APIは素晴らしいです！
— xgqfrms 2017年
2
//xobj.status is integer xobj.status === "200" should be xobj.status === 200
— yausername
@yausername正解です。そのエラー状態のタイプは申し訳ありません。修正されました。
— xgqfrms
14

元のポスターの実際のコードの問題を理解したり解決したりせずに、この質問に何度答えたのか信じられません。とはいえ、私は初心者です（コーディングはわずか2か月）。私のコードは完全に機能しますが、コードへの変更を提案してください。 これが解決策です： 

//include the   'async':false   parameter or the object data won't get captured when loading
var json = $.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false});  

//The next line of code will filter out all the unwanted data from the object.
json = JSON.parse(json.responseText); 

//You can now access the json variable's object data like this json.a and json.c
document.write(json.a);
console.log(json);

上記で提供したものと同じコードを書く短い方法を次に示します。

var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

$ .getJSONの代わりに$ .ajaxを使用して、まったく同じ方法でコードを記述することもできます。

var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

最後に、これを行う最後の方法は、$。ajaxを関数でラップすることです。これは信用できませんが、少し修正しました。私はそれをテストし、それが機能し、上記の私のコードと同じ結果を生成します。私はこの解決策をここに見つけました-> jsonを変数にロードします

var json = function () {
    var jsonTemp = null;
    $.ajax({
        'async': false,
        'url': "http://spoonertuner.com/projects/test/test.json",
        'success': function (data) {
            jsonTemp = data;
        }
    });
    return jsonTemp;
}(); 

document.write(json.a);
console.log(json);

test.jsonのあなたは上記の私のコードで参照ファイルが私のサーバー上でホストされているし、彼（オリジナルポスター）を掲載していたのと同じJSONデータオブジェクトが含まれています。

{
    "a" : "b",
    "c" : "d"
}
— スプーンホンダ
ソース
11

es6からのインポートが記載されていないことに驚いています（小さなファイルで使用）

例： import test from './test.json'

webpack 2 <は、ファイルのjson-loaderデフォルトとしてを使用し.jsonます。

https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore

以下のための活字体：

import test from 'json-loader!./test.json';

TS2307（TS）モジュール「json-loader！./ suburbs.json」が見つかりません

これを機能させるには、最初にモジュールを宣言する必要がありました。私はこれが誰かのために数時間を節約することを望みます。

declare module "json-loader!*" {
  let json: any;
  export default json;
}

...

import test from 'json-loader!./test.json';

私はオミットしようとした場合loaderのjson-loaderIから、次のエラーを得ましたwebpack：

重大な変更：ローダーを使用するときに「-loader」サフィックスを省略することはできなくなりました。「json」の代わりに「json-loader」を指定する必要があります。https： //webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removedを参照してください

— オグラス
ソース
1
簡単でわかりやすい。
— Our_Benefactors
file：プロトコルを使用してWebページがロードされている場合は、es6 importステートメントを使用できません。
— Onno van der Zee
6

試してみてください（ただし、JavaScriptがクライアントファイルシステムにアクセスできないことにも注意してください）。

$.getJSON('test.json', function(data) {
  console.log(data);
});
— サミチ
ソース
4

ローカルjsonファイルをロードしようとした（失敗した）ときにこのスレッドが見つかりました。この解決策は私にとってうまくいきました...

function load_json(src) {
  var head = document.getElementsByTagName('head')[0];

  //use class, as we can't reference by id
  var element = head.getElementsByClassName("json")[0];

  try {
    element.parentNode.removeChild(element);
  } catch (e) {
    //
  }

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.className = "json";
  script.async = false;
  head.appendChild(script);

  //call the postload function after a slight delay to allow the json to load
  window.setTimeout(postloadfunction, 100)
}

...そして、このように使用されています...

load_json("test2.html.js")

...そしてこれは<head>...

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>
— TechSpud
ソース
2
これはあまり再利用できないようです。たとえば、jsonファイルがリモートサーバーによって提供されている場合、100ミリ秒のタイムアウトではロードに不十分な場合があります。また、時間はクライアントの接続速度に依存するため、接続が遅いクライアントには非常に長いタイムアウトを設定する必要があります。つまり、リソースのロードを待機するためにsetTimeoutを使用しないでください。
— Kenny806
1
Kenny806-特定の問題を解決するためのものです-（ホストされていないWebページの）ローカルリソースをロードするため、再利用が困難です。Webでホストされるページには、何千ものリソース読み込みソリューションがあります。これではありません、それはだ、ソリューションソリューション。タイムアウトを変更するのは本当に簡単です。タイムアウトを削除することで、無限の待機が許容されることを示唆していますか？
— TechSpud
2
私は無限の待機を提案しているのではなく、ファイルのロードが完了したらすぐにそれに反応できるようにする手法を使用することを提案しています。タイムアウトに関する私の問題は、タイムアウトが終了するまで常に待たなければならないことです。ファイルが10msでロードされたとしても、100ms待つことになります。そして、はい、タイムアウトの調整は簡単ですが、提案されているのは、異なるファイルをロードするたびに、またはファイルサイズが変化するときに（待機を最適化するために）コードを変更することです。そのような解決策は私見が間違っており、特に他の誰かがそれを使用しようとすると、将来多くの頭痛の種を引き起こす可能性があります。
— Kenny806
このスクリプトを使用する人は、それを自分のスクリプトの基礎として使用する必要があります。あなたはこのスクリプトが間違っているかどうかについてあなたの意見を受け取る権利があります。代替ソリューションを提案してみませんか？これは間違いなくすべてのユースケースで機能するわけではありません。それは私のために働いて、ローカルのhtmlページからローカルファイルをロードしました。この質問に対する私の解決策を共有しました。それが他の誰かを助けることを願っています。ローカルリソースをロードしようとしていますか？ロードしているファイルに基づいて、タイムアウト値を変数として渡してみませんか？ローカルファイルのAjaxはかなり制限されています。
— TechSpud
1
onreadystatechangeまたはonloadを使用して、それらに関数を与える方がよい場合があります。script.onload = functionname;
— シェーンベスト
4

TypeScriptでは、インポートを使用してローカルJSONファイルをロードできます。たとえば、font.jsonの読み込み：

import * as fontJson from '../../public/fonts/font_name.json';

これには、tsconfigフラグ--resolveJsonModuleが必要です。

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

詳細については、typescriptのリリースノートを参照してください：https : //www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

— teh.fonsi
ソース
答えが少しわかりにくいので、詳細を記載する場合があります。
— ベイ
3

Angular（またはその他のフレームワーク）では、http getを使用してロードできます。

this.http.get(<path_to_your_json_file))
 .success((data) => console.log(data));

お役に立てれば。

— ラジキラン
ソース
3

私がしたことは、JSONファイルを少し編集することでした。

myfile.json => myfile.js

JSONファイルで（JS変数にします）

{name: "Whatever"} => var x = {name: "Whatever"}

最後に、

export default x;

そして、

import JsonObj from './myfile.js';

— スパンカヴィンダ
ソース
3

JSONのローカル配列を使用している場合-質問の例（test.json）で示したように、parseJSON()JQuery のメソッドを使用できます->

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

getJSON() リモートサイトからJSONを取得するために使用されます-ローカルで機能しません（ローカルHTTPサーバーを使用している場合を除く）

— マンセ
ソース
2 
$.ajax({
       url: "Scripts/testingJSON.json",
           //force to handle it as text
       dataType: "text",
            success: function (dataTest) {

                //data downloaded so we call parseJSON function 
                //and pass downloaded data
                var json = $.parseJSON(dataTest);
                //now json variable contains data in json format
                //let's display a few items
                $.each(json, function (i, jsonObjectList) {
                for (var index = 0; index < jsonObjectList.listValue_.length;index++) {
                      alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_);
                      }
                 });


             }
  });
— カーハン・ビジェイ
ソース
1

私が使用したいアプローチは、jsonをオブジェクトリテラルでパディング/ラップし、ファイルを.jsonpファイル拡張子で保存することです。この方法では、代わりに新しいjsonpファイル（test.jsonp）を使用するため、元のjsonファイル（test.json）は変更されません。ラッパーの名前は任意ですが、jsonpの処理に使用するコールバック関数と同じ名前である必要があります。例として投稿されたtest.jsonを使用して、「test.jsonp」ファイルのjsonpラッパーの追加を示します。

json_callback({"a" : "b", "c" : "d"});

次に、スクリプト内にグローバルスコープを持つ再利用可能な変数を作成して、返されたJSONを保持します。これにより、コールバック関数だけでなく、スクリプト内の他のすべての関数で返されたJSONデータを利用できるようになります。

var myJSON;

次は、スクリプトインジェクションによってjsonを取得する簡単な関数です。IEはjQuery .appendメソッドをサポートしていないため、ここではjQueryを使用してスクリプトをドキュメントヘッドに追加できないことに注意してください。以下のコードでコメントアウトされているjQueryメソッドは、.appendメソッドをサポートする他のブラウザーで動作します。これは、違いを示すための参照として含まれています。

function getLocalJSON(json_url){
    var json_script  = document.createElement('script');
    json_script.type = 'text/javascript';
    json_script.src  = json_url;
    json_script.id   = 'json_script';
    document.getElementsByTagName('head')[0].appendChild(json_script);
    // $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}

次は、json結果データをグローバル変数に取得するための、短くて単純なコールバック関数（jsonpラッパーと同じ名前）です。

function json_callback(response){
    myJSON = response;            // Clone response JSON to myJSON object
    $('#json_script').remove();   // Remove json_script from the document
}

jsonデータは、ドット表記を使用してスクリプトの任意の関数からアクセスできるようになりました。例として：

console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console

この方法は、見慣れた方法とは少し異なる場合がありますが、多くの利点があります。まず、同じjsonpファイルをローカルに、または同じ関数を使用してサーバーからロードできます。おまけとして、jsonpはすでにクロスドメインフレンドリーな形式になっており、RESTタイプのAPIでも簡単に使用できます。

確かに、エラー処理関数はありませんが、なぜ必要なのでしょうか？このメソッドを使用してjsonデータを取得できない場合は、json自体にい​​くつかの問題があることを確信できます。私はそれを適切なJSONバリデーターで確認します。

— 悟り
ソース
1

jsonをjavascriptファイルに入れることができます。これは、jQueryを使用してローカルに（Chromeでも）ロードできますgetScript()関数。

map-01.jsファイル：

var json = '{"layers":6, "worldWidth":500, "worldHeight":400}'

main.js

$.getScript('map-01.js')
    .done(function (script, textStatus) {
        var map = JSON.parse(json); //json is declared in the js file
        console.log("world width: " + map.worldWidth);
        drawMap(map);
    })
    .fail(function (jqxhr, settings, exception) {
        console.log("error loading map: " + exception);
    });

出力：

world width: 500

json変数がjsファイルで宣言および割り当てられていることに注意してください。

— ビクター・ストッダード
ソース
0

GoogleのClosureライブラリを使用した解決策は見つかりませんでした。将来の訪問者のためにリストを完成させるために、Closureライブラリを使用してローカルファイルからJSONをロードする方法を次に示します。

goog.net.XhrIo.send('../appData.json', function(evt) {
  var xhr = evt.target;
  var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
  console.log(obj);
});
— ケニー806
ソース
0 

json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);

console.log(obj[0]["name"]);
スニペットを展開

JSON用の新しいjavascriptファイルを作成し、JSONデータをに貼り付けてString.raw解析するように、私はコルドバアプリに対してこれを行いましたJSON.parse

— ジーヴァ
ソース
それはそうと、単純に使用していないオブジェクトを行う理由のJavaScriptファイルの場合JavaScript Object Notation：（JSON）を obj = [{"name": "Jeeva"}, {"name": "Kumar"}]
— ヌーノ・アンドレ
文字列として来たajaxを使用していくつかのjsonデータをフェッチJSON.parseしたため、JavaScriptオブジェクトに変換するために使用しました
— Jeeva
0 
function readTextFile(srcfile) {
        try { //this is for IE
            var fso = new ActiveXObject("Scripting.FileSystemObject");;
            if (fso.FileExists(srcfile)) {
                var fileReader = fso.OpenTextFile(srcfile, 1);
                var line = fileReader.ReadLine();
                var jsonOutput = JSON.parse(line); 
            }

        } catch (e) {

        }
}

readTextFile("C:\\Users\\someuser\\json.txt");

まず、ネットワークタブからサービスのネットワークトラフィックを記録し、応答本文からjsonオブジェクトをローカルファイルにコピーして保存しました。次に、ローカルファイル名を指定して関数を呼び出します。上のjsonOutoutでjsonオブジェクトを確認できるはずです。

— 風水張
ソース
2
コードを貼り付けるだけでなく、ソリューションについて説明してください。それが問題をどのように解決したかを説明するソリューションだけがコミュニティを助けます。
— gmuraleekrishna 2017
注：InternetExplorerが必要
— Sancarn 2018
0

私のために働いたのは次のとおりです：

入力： 

http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json

JavaScriptコード： 

<html>
<head>

<style>
pre {}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>

<script>
function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function gethtmlcontents(){
    path = window.location.search.substr(1)
    var rawFile = new XMLHttpRequest();
    var my_file = rawFile.open("GET", path, true)  // Synchronous File Read
    //alert('Starting to read text')
    rawFile.onreadystatechange = function ()
    {
        //alert("I am here");
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                //alert(allText)
                var json_format = JSON.stringify(JSON.parse(allText), null, 8)
                //output(json_format)
                output(syntaxHighlight(json_format));
            }
        }
    }
    rawFile.send(null);
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

gethtmlcontents();
</script>
</head>
<body>
</body>
</html>
— ビシュワシュミシュラ
ソース
-4

ローカルマシンにPythonがインストールされている場合（またはインストールしてもかまわない場合）、使用するローカルJSONファイルアクセスの問題に対するブラウザーに依存しない回避策を次に示します。

データをJavaScriptオブジェクトとして返す関数を作成して、JSONファイルをJavaScriptに変換します。次に、それを<script>タグでロードし、関数を呼び出して必要なデータを取得できます。

これがPythonコードです

import json


def json2js(jsonfilepath, functionname='getData'):
    """function converting json file to javascript file: json_data -> json_data.js
    :param jsonfilepath: path to json file
    :param functionname: name of javascript function which will return the data
    :return None
    """
    # load json data
    with open(jsonfilepath,'r') as jsonfile:
        data = json.load(jsonfile)
    # write transformed javascript file
    with open(jsonfilepath+'.js', 'w') as jsfile:
        jsfile.write('function '+functionname+'(){return ')
        jsfile.write(json.dumps(data))
        jsfile.write(';}')

if __name__ == '__main__':
    from sys import argv
    l = len(argv)
    if l == 2:
        json2js(argv[1])
    elif l == 3:
        json2js(argv[1], argv[2])
    else:
        raise ValueError('Usage: python pathTo/json2js.py jsonfilepath [jsfunctionname]')
— シトラス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.