ローカルの JSON ファイルを読み込もうとしていますが、うまくいきません。これが私のJavaScriptコードです（jQueryを使用）：
var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);
test.json ファイル:
{"a" : "b", "c" : "d"}
何も表示されず、Firebug はそれdataが未定義であることを教えてくれます。Firebug で見ることができjson.responseText、それは有効で有効ですが、次の行をコピーすると奇妙です:
var data = eval("(" +json.responseText + ")");
Firebug のコンソールでは動作し、データにアクセスできます。
誰にも解決策がありますか？
$.getJSON非同期なので、次のことを行う必要があります。
$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});
(angularjs アプリをテストするために) 同じ必要がありましたが、見つけた唯一の方法は、require.js を使用することです。
var json = require('./data.json'); //(with path)
注: ファイルが一度読み込まれると、以降の呼び出しでキャッシュが使用されます。
nodejs を使用したファイルの読み取りの詳細: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs
require.js: http://requirejs.org/
手早く簡単なものを探している場合は、HTML ドキュメントの head にデータをロードするだけです。
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 での) ヒープ サイズは約 4 GB であるため、データがそれより大きい場合は、別の方法を見つける必要があります。別のブラウザを確認したい場合は、これを試してください：
window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"
XMLHttpRequestをロードするために使用する方法json// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!
function loadJSON(callback) {
var xObj = new XMLHttpRequest();
xObj.overrideMimeType("application/json");
xObj.open('GET', './data.json', true);
// 1. replace './data.json' with the local path of your file
xObj.onreadystatechange = function() {
if (xObj.readyState === 4 && xObj.status === 200) {
// 2. call your callback function
callback(xObj.responseText);
}
};
xObj.send(null);
}
function init() {
loadJSON(function(response) {
// 3. parse JSON string into JSON Object
console.log('response =', response);
var json = JSON.parse(response);
console.log('your local JSON =', JSON.stringify(json, null, 4));
// 4. render to your page
const app = document.querySelector('#app');
app.innerHTML = '<pre>' + JSON.stringify(json, null, 4) + '</pre>';
});
}
init();<section id="app">
loading...
</section>// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!
const loadJSON = (callback) => {
const xObj = new XMLHttpRequest();
xObj.overrideMimeType("application/json");
// 1. replace './data.json' with the local path of your file
xObj.open('GET', './data.json', true);
xObj.onreadystatechange = () => {
if (xObj.readyState === 4 && xObj.status === 200) {
// 2. call your callback function
callback(xObj.responseText);
}
};
xObj.send(null);
}
const init = () => {
loadJSON((response) => {
// 3. parse JSON string into JSON Object
console.log('response =', response);
const json = JSON.parse(response);
console.log('your local JSON =', JSON.stringify(json, null, 4));
// 4. render to your page
const app = document.querySelector('#app');
app.innerHTML = `<pre>${JSON.stringify(json, null, 4)}</pre>`;
});
}
init();<section id="app">
loading...
</section>最近、D3jsはローカルの json ファイルを扱えるようになりました。
これは問題です https://github.com/mbostock/d3/issues/673
これは、D3 がローカルの json ファイルを操作するためのパッチです。 https://github.com/mbostock/d3/pull/632
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
JSONにローカル配列を使用している場合-質問の例(test.json)で示したように、parseJSON()JQueryの方法です->
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
getJSON()リモート サイトから JSON を取得するために使用されます - ローカルでは機能しません (ローカルの HTTP サーバーを使用していない場合)
$.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_);
}
});
}
});
json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);
console.log(obj[0]["name"]);JSON用の新しいjavascriptファイルを作成し、JSONデータを貼り付けてString.rawから解析するように、cordovaアプリでこれを行いましたJSON.parse
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 オブジェクトを確認できるはずです。