JavaScriptで外部のローカルJSONファイルを読むには?

JSONファイルをローカルシステムに保存し、そのJSONファイルを読み込んでデータを出力するためのJavaScriptファイルを作成しました。以下がそのJSONファイルです。

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

これがJSONファイルのパスだとします。/Users/Documents/workspace/test.jsonです。

誰か、JSONファイルを読み込んで、その中のデータをJavaScriptで表示する簡単なコードを書くのを手伝ってくれませんか?

質問へのコメント (1)

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

詳細については、この参照を参照してください。

解説 (10)

ハードディスクからの 。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ファイルのロードにも機能します。

解説 (4)
ソリューション

リクエストはHTTPで行われるため、ローカルリソースにAJAXコールを行うことはできません。

回避策としては、ローカルのウェブサーバを実行し、ファイルを提供し、ローカルホストにAJAXコールを行うことができます。

JSONを読むためのコードを書くのに役立つという点では、jQuery.getJSON()のドキュメントを読むとよいでしょう。

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

解説 (14)

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"}]

2。 これが私のコード、つまり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());

3。 特定のIDの詳細を読みたい場合は、コードを次のように指定できます。.


 app.get('/get/:id',function(req,res){

var i;

 for(i=0;i
解説 (3)

Node.jsの場合、またはブラウザでrequire.jsを使用する場合の場合、次のことができます。

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

注意:ファイルは1回ロードされ、後続の呼び出しではキャッシュが使用されます。

解説 (2)

フェッチAPIを使用するのが最も簡単なソリューションです。

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

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

解説 (1)

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

これを行うには、ここからの手順を試してみてください。http://www.html5rocks.com/en/tutorials/file/dndfiles/

ファイルが読み込まれると、次のようにしてデータを取得できます。

var jsonData = JSON.parse(theTextContentOfMyFile);
解説 (0)

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

data.js

MyData = { resource:"A",literals:["B","C","D"]}
  • XMLHttpRequests *、解析はせず、 MyData.resourceを直接使用してください。
解説 (1)

とても簡単です。
。 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"}]';
解説 (1)


。 前に多くの人が述べたように、これは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);
});
解説 (1)

$ .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)
            }
        })
    });
解説 (0)

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

ファイルを別のフォルダーに持っている場合は、ファイル名の代わりに完全なパスを指定してください。

解説 (0)

Webアプリケーションを使用しているため、クライアントとサーバーを使用している可能性があります。

ブラウザーのみがあり、ブラウザーで実行されているJavaScriptからローカルファイルを読みたい場合は、クライアントしかいないということです。 セキュリティ上の理由から、ブラウザはあなたにそのようなことをさせてはなりません。

ただし、lauhubが上記で説明したように、これはうまくいくようです。

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

その他の解決策は、マシンのどこかにWebサーバー(Windowsの場合は小さな、Linuxの場合はサル)をセットアップし、XMLHttpRequestまたはD3ライブラリを使用して、サーバーにファイルをリクエストして読み取ります。 サーバーはローカルファイルシステムからファイルを取得し、Web経由で提供します。

解説 (0)

新しい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)

簡単な回避策の1つは、ローカルで実行されているサーバー内にJSONファイルを配置することです。 そのためには、ターミナルからプロジェクトフォルダーに移動し、ローカルサーバーを8181などのポート番号で起動します。

python -m SimpleHTTPServer 8181

次に、 http://localhost:8181 / を参照すると、JSONを含むすべてのファイルが表示されます。まだ持っていない場合は、pythonをインストールしてください。

解説 (0)

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の別の関数に移動できます。しかし、ここでの例は、約束の使用方法を示すことです。

解説 (0)

ES6モジュールのようにインポートできます。

import data from "/Users/Documents/workspace/test.json"
解説 (2)

もし、ローカルのウェブサーバーを動かすことができ(上記のChris Pの提案のように)、jQueryを使うことができるなら、http://api.jquery.com/jQuery.getJSON/ を試すことができます。

解説 (0)

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)

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 => {
      ''
    });
解説 (0)