ローカルJSONファイルの読み込み
ローカルの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のコンソールでは動作し、データにアクセスできます。
誰か解決策がありますか？
$.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/
ユーザーにローカルの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/ /
すばやく汚いものを探しているなら、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"}
})()
より現代的な方法では、 Fetch API を使用できます。
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
最近のブラウザはすべてFetch APIをサポートしています。 （Internet Explorerはそうではありませんが、Edgeはそうしています！）
ソース：
ace.webgeeker.xyz
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);
});
}オリジナルのポスターの実際のコードで問題を理解したり対処しない限り、この質問に何回答えられたのか私は信じられません。とは言っても、私は自分自身が初心者です（わずか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"
}
私はes6からのインポートが言及されていないのに驚いています（小さいファイルでの使用）
例：import test from './test.json'
webpack 2 <はjson-loaderファイルのデフォルトとして.jsonを使います。
https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore
TypeScript ：の場合
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';
json-loaderからloaderを省略しようとした場合、webpackから次のエラーが発生しました。
ブレークチェンジ：ローダーを使うとき、 ' - ローダー'接尾辞を省略することはもはや許されません。 'json'の代わりに 'json-loader'を指定する必要があります。 https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed を参照してください。
最近 D3js はローカルのjsonファイルを扱うことができます。
これが問題です https://github.com/mbostock/d3/issues/673
これは、D3がローカルのjsonファイルを扱うためのパッチの順序です。 https://github.com/mbostock/d3/pull/632
そのようにしてみてください（ただし、JavaScriptはクライアントファイルシステムにアクセスできません）。
$.getJSON('test.json', function(data) {
console.log(data);
});
ローカル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>
Angular（または他のフレームワーク）では、http getを使用してロードできます。このように使用します。
this.http.get(<path_to_your_json_file))
.success((data) => console.log(data));
お役に立てれば。
TypeScriptでは、importを使ってローカルの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
$.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のためにローカル配列を使っているなら - あなたがあなたの例（test.json）の中で示したように、あなたはJQueryのparseJSONメソッドであることができます - >
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
getJSONはリモートサイトからJSONを取得するために使用されます - ローカルでは動作しません（ローカルのHTTPサーバーを使用していない限り）。
グーグルのクロージャライブラリを使った解決策は見つからなかった。それで、将来のvistorのリストを完成させるために、Closure libraryを使ってローカルファイルから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);
});
私がしたことは、JSONファイルを少し編集することでした。
myfile.json => myfile.js
JSONファイルで（JS変数にします）
{name: "Whatever"} => var x = {name: "Whatever"}
最後に、
export default x;
次に、
import JsonObj from './myfile.js';
私にとってうまくいったのは以下のとおりです。
入力：
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, '&').replace(/</g, '<').replace(/>/g, '>');
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>
あなたのjsonをjavascriptファイルに入れることができます。これはjQueryのgetScript()関数を使ってローカルに（Chromeでも）読み込むことができます。
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ファイルで割り当てられていることに注意してください。
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を使用して解析するように、これを自分のcordovaアプリケーションに対して行いました。
私が使用したいアプローチは、オブジェクトリテラルで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バリデーターで確認します。
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オブジェクトが表示されるはずです。