JSON ファイルをローカル システムに保存し、JSON ファイルを読み取ってデータを出力するために JavaScript ファイルを作成しました。JSON ファイルは次のとおりです。
{"resource":"A","literals":["B","C","D"]}
これが JSON ファイルのパスだとしましょう: /Users/Documents/workspace/test.json.
JSONファイルを読み取ってJavaScriptでデータを出力するための簡単なコードを書くのを手伝ってくれませんか?
JavaScript を使用して外部ローカル JSON ファイル (data.json) を読み取るには、まず data.json ファイルを作成します。
data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';
それで、
スクリプト ソース内の json ファイルのパスと、javascript ファイルを指定します。
<script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascript.js"></script>
json ファイルからオブジェクトを取得する
var mydata = JSON.parse(data);
alert(mydata[0].name);
alert(mydata[0].age);
alert(mydata[1].name);
alert(mydata[1].age);
詳細については、このリファレンスを参照してください。
要求は HTTP を使用して行われるため、ローカル リソースに対して AJAX 呼び出しを行うことはできません。
回避策は、ローカル Web サーバーを実行し、ファイルを提供して、localhost への AJAX 呼び出しを行うことです。
JSON を読み取るためのコードを作成するのに役立つという点では、次のドキュメントを読む必要がありますjQuery.getJSON()。
Node.js の場合、またはブラウザで require.js を使用する場合は、次のように簡単に実行できます。
let json = require('/Users/Documents/workspace/test.json');
console.log(json, 'the json obj');
注: ファイルは 1 回読み込まれ、その後の呼び出しでキャッシュが使用されます。
ブラウザによっては、ローカル ファイルにアクセスできます。ただし、これはアプリのすべてのユーザーに対して機能するとは限りません。
これを行うには、次の手順を試すことができます: http://www.html5rocks.com/en/tutorials/file/dndfiles/
ファイルが読み込まれたら、次を使用してデータを取得できます。
var jsonData = JSON.parse(theTextContentOfMyFile);
ローカル ファイルを使用している場合、データを js オブジェクトとしてパッケージ化しませんか?
data.js
MyData = { resource:"A",literals:["B","C","D"]}
XMLHttpRequestsなし、解析なし、MyData.resource直接使用するだけ
$.getJSON を使用してから $.each を使用して、キーと値のペアを繰り返します。JSON ファイルと機能コードのコンテンツの例:
{
{
"key": "INFO",
"value": "This is an example."
}
}
var url = "file.json";
$.getJSON(url, function (data) {
$.each(data, function (key, model) {
if (model.key == "INFO") {
console.log(model.value)
}
})
});
ローカル Web サーバーを実行できる場合 ( Chris Pが上記で提案したように)、jQuery を使用できる場合は、http://api.jquery.com/jQuery.getJSON/を試すことができます。
上記の Stano/Meetar のコメントが気に入りました。.json ファイルの読み取りに使用します。Promise を使用して例を拡張しました。これが同じプランカーです。 https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview
function readTextFile(file, callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4 && rawFile.status == "200") {
callback(rawFile.responseText);
}
}
rawFile.send(null);
}
//usage:
// readTextFile("DATA.json", function(text){
// var data = JSON.parse(text);
// console.log(data);
// });
var task1 = function (){
return new Promise (function(resolve, reject){
readTextFile("DATA.json", function(text){
var data = JSON.parse(text);
console.log('task1 called');
console.log(data);
resolve('task1 came back');
});
});
};
var task2 = function (){
return new Promise (function(resolve, reject){
readTextFile("DATA2.json", function(text){
var data2 = JSON.parse(text);
console.log('task2 called');
console.log(data2);
resolve('task2 came back');
});
});
}
Promise.race([task1(), task2()])
.then(function(fromResolve){
console.log(fromResolve);
});
DRY の場合、JSON の読み取りを別の関数に移動できます。しかし、ここでの例はより多くの promise の使用方法を紹介するものです。
JSON ファイルを .js ファイルに変換し、json を変数または const に割り当ててから、メインの JavaScript ファイルで参照します。
を使用jQueryしてファイルajaxを読み取りJSON、データを操作する
$(document).ready(function () {
$.ajax({
url: 'country.json',
type: 'GET',
dataType: 'json',
success: function (code, statut) {
for (let i in code) {
console.log(i)
}
}
});
});