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"}]';
1。 スクリプトソース内のjsonファイルのパスとJavaScriptファイルについて言及します。
<script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascrip.js"></script>
2。 jsonファイルからオブジェクトを取得します。
var mydata = JSON.parse(data);
alert(mydata[0].name);
alert(mydata[0].age);
alert(mydata[1].name);
alert(mydata[1].age);
詳細については、この参照を参照してください。
ハードディスクからの 。json
ファイルのロードは非同期操作であるため、ファイルをロードした後に実行するコールバック関数を指定します。
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("/Users/Documents/workspace/test.json", function(text){
var data = JSON.parse(text);
console.log(data);
});
この関数は、mime typeパラメータを " text / html "
、"text / plain"
などにオーバーライドすることにより、 .html
または .txt
ファイルのロードにも機能します。
リクエストはHTTPで行われるため、ローカルリソースにAJAXコールを行うことはできません。
回避策としては、ローカルのウェブサーバを実行し、ファイルを提供し、ローカルホストにAJAXコールを行うことができます。
JSONを読むためのコードを書くのに役立つという点では、jQuery.getJSON()
のドキュメントを読むとよいでしょう。
1。 まず、jsonファイルを作成します。 この例では、私のファイルはwords.jsonです。
<。!-スニペットを開始:js hide:false console:true babel:false -->。
[{"name":"ay","id":"533"},
{"name":"kiy","id":"33"},
{"name":"iy","id":"33"},
{"name":"iy","id":"3"},
{"name":"kiy","id":"35"},
{"name":"kiy","id":"34"}]
<。!-終了スニペット-->。
2。 これが私のコード、つまりnode.jsです。 readFileSync
への 'utf8'
引数に注意してください。これにより、 Buffer
( JSON.parse
で処理できますが)ではなく、文字列が返されます。 結果を確認するためにサーバーを作成しています。..
<。!-スニペットを開始:js hide:false console:true babel:false -->。
var fs=require('fs');
var data=fs.readFileSync('words.json', 'utf8');
var words=JSON.parse(data);
var bodyparser=require('body-parser');
console.log(words);
var express=require('express');
var app=express();
var server=app.listen(3030,listening);
function listening(){
console.log("listening..");
}
app.use(express.static('website'));
app.use(bodyparser.urlencoded({extended:false}));
app.use(bodyparser.json());
<。!-終了スニペット-->。
3。 特定のIDの詳細を読みたい場合は、コードを次のように指定できます。.
<。!-スニペットを開始:js hide:false console:true babel:false -->。
app.get('/get/:id',function(req,res){
var i;
for(i=0;i<words.length;++i)
{
if(words[i].id==req.params.id){
res.send(words[i]);
}
}
console.log("success");
});
<。!-終了スニペット-->。
4。 localhost:3030 / get / 33
としてURLに入力すると、そのIDに関連する詳細が表示されます。..。そしてあなたも名前で読みます。 私のjsonファイルには、このコードを含む類似の名前があり、1つの名前の詳細を取得できます。..。そしてそれはすべての類似の名前を印刷しませんでした。
<。!-スニペットを開始:js hide:false console:true babel:false -->。
app.get('/get/:name',function(req,res){
var i;
for(i=0;i<words.length;++i)
{
if(words[i].id==req.params.name){
res.send(words[i]);
}
}
console.log("success");
});
<。!-終了スニペット-->。
5。 また、類似の名前の詳細を読みたい場合は、このコードを使用できます。
<。!-スニペットを開始:js hide:false console:true babel:false -->。
app.get('/get/name/:name',function(req,res){
word = words.filter(function(val){
return val.name === req.params.name;
});
res.send(word);
console.log("success");
});
<。!-終了スニペット-->。
6。 ファイル内のすべての情報を読みたい場合は、以下のコードを使用してください。
<。!-スニペットを開始:js hide:false console:true babel:false -->。
app.get('/all',sendAll);
function sendAll(request,response){
response.send(words);
}
<。!-終了スニペット-->。
Node.jsの場合、またはブラウザでrequire.jsを使用する場合の場合、次のことができます。
let json = require('/Users/Documents/workspace/test.json');
注意:ファイルは1回ロードされ、後続の呼び出しではキャッシュが使用されます。
フェッチAPIを使用するのが最も簡単なソリューションです。
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
Firefoxでは完璧に機能しますが、Chromeではセキュリティ設定をカスタマイズする必要があります。
ローカルファイルを使用している場合は、データをjsオブジェクトとしてパッケード化しないでください?
data.js 。
MyData = { resource:"A",literals:["B","C","D"]}
MyData.resource
を直接使用してください。とても簡単です。
。
jsonファイルの名前を「.json」ではなく「.js」に変更します。
。
<script type="text/javascript" src="my_json.js"></script>
したがって、通常、コードに従ってください。
<script type="text/javascript">
var obj = JSON.parse(contacts);
ただし、参考までに、私のjsonの内容は、以下の切り取りのように見えます。
contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';
。
前に多くの人が述べたように、これはAJAX呼び出しを使用して機能しません。 しかし、それを回避する方法があります。 入力要素を使用して、ファイルを選択できます。
選択したファイル(.json)には、次の構造が必要です。
[
{"key": "value"},
{"key2": "value2"},
...
{"keyn": "valuen"},
]
。
<input type="file" id="get_the_file">
次に、FileReader():を使用してJSを使用してファイルを読み取ることができます。
document.getElementById("get_the_file").addEventListener("change", function() {
var file_to_read = document.getElementById("get_the_file").files[0];
var fileread = new FileReader();
fileread.onload = function(e) {
var content = e.target.result;
// console.log(content);
var intern = JSON.parse(content); // Array of Objects.
console.log(intern); // You can index every object
};
fileread.readAsText(file_to_read);
});
$ .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)
}
})
});
XMLHttpRequest()メソッドを使用できます。
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
//console.log("Json parsed data is: " + JSON.stringify(myObj));
}
};
xmlhttp.open("GET", "your_file_name.json", true);
xmlhttp.send();
console.logステートメント(コメントアウト)を使用してmyObjの応答を確認できます。
AngularJSを知っている場合は、$ http:を使用できます。
MyController.$inject = ['myService'];
function MyController(myService){
var promise = myService.getJsonFileContents();
promise.then(function (response) {
var results = response.data;
console.log("The JSON response is: " + JSON.stringify(results));
})
.catch(function (error) {
console.log("Something went wrong.");
});
}
myService.$inject = ['$http'];
function myService($http){
var service = this;
service.getJsonFileContents = function () {
var response = $http({
method: "GET",
url: ("your_file_name.json")
});
return response;
};
}
ファイルを別のフォルダーに持っている場合は、ファイル名の代わりに完全なパスを指定してください。
Webアプリケーションを使用しているため、クライアントとサーバーを使用している可能性があります。
ブラウザーのみがあり、ブラウザーで実行されているJavaScriptからローカルファイルを読みたい場合は、クライアントしかいないということです。 セキュリティ上の理由から、ブラウザはあなたにそのようなことをさせてはなりません。
ただし、lauhubが上記で説明したように、これはうまくいくようです。
http://www.html5rocks.com/en/tutorials/file/dndfiles/。
その他の解決策は、マシンのどこかにWebサーバー(Windowsの場合は小さな、Linuxの場合はサル)をセットアップし、XMLHttpRequestまたはD3ライブラリを使用して、サーバーにファイルをリクエストして読み取ります。 サーバーはローカルファイルシステムからファイルを取得し、Web経由で提供します。
新しいXMLHttpRequestインスタンスを作成し、jsonファイルの内容をロードする必要があります。
このヒントは私にとってはうまくいきます(https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript):
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);
}
loadJSON(function(response) {
// Parse JSON string into object
var actual_JSON = JSON.parse(response);
});
Stano / Meetarが上でコメントした内容が好きでした。 .jsonファイルを読み取るために使用します。 Promiseを使用して、彼らの例を拡張しました。 同じためのプランカーです。 https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p =プレビュー。
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);
});
JSONの読み取りは、DRYの別の関数に移動できます。しかし、ここでの例は、約束の使用方法を示すことです。
もし、ローカルのウェブサーバーを動かすことができ(上記のChris Pの提案のように)、jQueryを使うことができるなら、http://api.jquery.com/jQuery.getJSON/ を試すことができます。
Stano'sの優れた答えを取り、約束に包みました。 これは、ファイルシステムからjsonファイルをロードするためにフォールバックするノードやWebパックなどのオプションがない場合に役立ちます。
// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) =>
new Promise((resolve, reject) => {
let request = new XMLHttpRequest();
request.onload = resolve;
request.onerror = reject;
request.overrideMimeType("application/json");
request.open(options.method, file, true);
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === "200") {
resolve(request.responseText);
}
};
request.send(null);
});
このように呼び出すことができます。
readFileP('<path to file>')
.then(d => {
'<do something with the response data in d.srcElement.response>'
});