web-dev-qa-db-ja.com

JavaScriptで外部のローカルJSONファイルを読み取る方法

たとえば、JSONファイルをローカルシステムに保存し、JSONファイルを読み込んでデータを印刷するためにJavaScriptファイルを作成しました。これがJSONファイルです。

{"resource":"A","literals":["B","C","D"]}

これがJSONファイルのパスであるとしましょう：/Users/Documents/workspace/test.json。

JSONファイルを読み取り、その中のデータをJavaScriptで印刷するための簡単なコードを書く手助けをしてくれる人がいますか

javascriptjson
187
user2864315

HTTPを使用して要求が行われるときに、ローカルリソースに対してAJAX呼び出しを行うcannotを行います。

回避策は、ローカルWebサーバーを実行し、ファイルを提供し、AJAXをlocalhostに呼び出すことです。

JSONを読み取るためのコードの作成を支援するという点では、jQuery.getJSON()のドキュメントを読む必要があります。

http://api.jquery.com/jQuery.getJSON/

74
Chris Pickford

Javascriptを使用して外部のローカルJSONファイル（data.json）を読み取るには、まずdata.jsonファイルを作成します。

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

  1. Javascriptファイルとともに、スクリプトソース内のjsonファイルのパスを記述します。

    <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);

詳細については、 このリファレンス を参照してください。

152
Ashfedy

ハードディスクからの .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パラメータを.html、.txtなどに上書きすることによって、"text/html"または"text/plain"ファイルをロードするのにも機能します.

105
Stano
  1. まず、JSONファイルを作成します。この例では、私のファイルはwords.jsonです。
[{"name":"ay","id":"533"},
{"name":"kiy","id":"33"},
{"name":"iy","id":"33"},
{"name":"iy","id":"3"},
{"name":"kiy","id":"35"},
{"name":"kiy","id":"34"}]
  1. そしてここに私のコード、すなわちnode.jsがあります。 readFileSyncへの'utf8'引数に注意してください：これはBufferではなく（JSON.parseがそれを扱うことができる）、文字列を返すようにします。結果を見るためにサーバーを作成しています...
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());
  1. 特定のIDの詳細を読みたい場合は、コードとして..を挙げることができます。
 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");
          
});
  1. あなたがlocalhost:3030/get/33としてurlに入ったとき、それはそのidに関連した詳細を与えるでしょう....そしてあなたはまた名前で読みます。私のjsonファイルには、このコードを使った類似の名前があり、名前の詳細を1つ取得できます。すべての類似の名前が印刷されるわけではありません。
 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");
          
});
  1. そして、あなたが似たような名前の詳細を読みたければ、あなたはこのコードを使うことができます。
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");
          
});
  1. ファイル内のすべての情報を読みたい場合は、以下のこのコードを使用してください。
app.get('/all',sendAll);
 
 function sendAll(request,response){
 response.send(words);

 }
24
Syed Ayesha Bebe

あなたは単にすることができます：

let json = require('/Users/Documents/workspace/test.json');

注意してください：ファイルは一度ロードされます、それ以降の呼び出しはキャッシュを使います。

13
musicformellons

ブラウザによっては、ローカルファイルにアクセスすることがあります。しかし、これはあなたのアプリのすべてのユーザーにはうまくいかないかもしれません。

これを行うには、ここから手順を試すことができます。 http://www.html5rocks.com/en/tutorials/file/dndfiles/ /

ファイルがロードされたら、次のようにしてデータを取得できます。

var jsonData = JSON.parse(theTextContentOfMyFile);
11
lauhub

ローカルファイルを使用している場合は、データを単にjsオブジェクトとしてパックしないでください。

data.js 

MyData = { resource:"A",literals:["B","C","D"]}

いいえ XMLHttpRequests 、解析なし、直接MyData.resourceを直接使用する

9
user7394313

とても簡単です。
jsonファイルの名前を「.json」ではなく「.js」に変更します。

<script type="text/javascript" src="my_json.js"></script>

それであなたのコードを普通に従ってください。

<script type="text/javascript">
var obj = JSON.parse(contacts);

ただし、情報としては、コンテンツは以下の断片のように見えます。

contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';
8
Antonio Carlos Del Grande Juni

Fetch API を使用するのが最も簡単な解決策です。

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

Firefoxでは完璧に機能しますが、Chromeではセキュリティ設定をカスタマイズする必要があります。

6
Alex Glinsky


前にも述べたように、これはAJAX呼び出しを使用しても機能しません。しかし、それを回避する方法があります。 input要素を使ってファイルを選択できます。

選択したファイル（.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);
});
4
Sarah Cross

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;
  };
}

ファイルが別のフォルダにある場合は、filenameの代わりに完全パスを指定してください。

2
Maharshi Rawal

ペアのKey/valueを繰り返すには、$ .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)
            }
        })
    });
2
Juan Carlos Aviles Lazcano

簡単な回避策の1つは、JSONファイルをローカルで稼働しているサーバー内に置くことです。そのためには、端末からプロジェクトフォルダに行き、いくつかのポート番号でローカルサーバーを起動します。例：8181

python -m SimpleHTTPServer 8181

それからhttp：// localhost：8181/にアクセスすると、JSONを含むすべてのファイルが表示されます。まだ持っていなければ、忘れずにpythonをインストールしてください。

1
ewalel

新しい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);
 });
1
rodrigomelo

私は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); 
       });

JSONの読み方はDRYのための別の関数に移動することができます。しかし、ここでの例は、プロミスの使い方を紹介するものです。

1
Plankton

Webアプリケーションがあるので、クライアントとサーバーがあるかもしれません。

あなたがあなたのブラウザだけを持っていて、あなたがあなたのブラウザで走っているジャバスクリプトからローカルファイルを読みたいならば、それはあなたがクライアントだけを持っていることを意味します。セキュリティ上の理由から、ブラウザはあなたにそのようなことをさせてはいけません。

しかし、lauhubが上で説明したように、これはうまくいくようです：

http://www.html5rocks.com/en/tutorials/file/dndfiles/ /

他の解決策はあなたのマシンのどこかにWebサーバ（Windowsでは小さいかLinuxでは猿）をセットアップし、XMLHttpRequestあるいはD3ライブラリを使ってサーバからファイルを要求しそれを読むことです。サーバーはローカルファイルシステムからファイルを取得し、それをWeb経由であなたに提供します。

1
Antoni

あなたがローカルWebサーバーを動かすことができれば（ Chris P が上で示唆したように）、あなたがjQueryを使うことができれば、あなたは http://api.jquery.com/jQuery.getJSON/ を試すことができます。

0
Nicolae Olariu

次のようにD3を使用してコールバックを処理し、ローカルのJSONファイルdata.jsonを読み込むことができます。

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>
  d3.json("data.json", function(error, data) {
    if (error)
      throw error;
    console.log(data);
  });
</script>
0
AlexG