web-dev-qa-db-ja.com

JQueryを使用してhtmlページにデータを表示するためにローカルJSONファイルをロードしようとしています

こんにちは、JQueryを使用してデータを表示するローカルJSONファイルをロードしようとしていますが、奇妙なエラーが発生しています。これを解決する方法を教えてください。

<html>
 <head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>        

<script type="text/javascript">
    $(document).ready(function(e) {
    $.getJSON( "priorities.json" , function( result ){
        alert(result.start.count);
    });
});
</script></head>
</html>

JSONデータの数を警告しているだけです。私のJSONファイルは、このhtmlファイルと同じディレクトリにあり、JSON文字列形式を以下に示します。

{
"start": {
    "count": "5",
    "title": "start",
    "priorities": [
        {
            "txt": "Work"
        },
        {
            "txt": "Time Sense"
        },
        {
            "txt": "Dicipline"
        },
        {
            "txt": "Confidence"
        },
        {
            "txt": "CrossFunctional"
        }
    ]
}
}

JSONファイル名priorityities.jsonおよびエラーは

キャッチされていない参照エラーの優先度は定義されていません

javascriptjqueryhtmljson
38
Venkata Krishna

JQuery APIが言うように：「GET HTTP要求を使用してサーバーからJSONエンコードデータをロードします。」

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

そのため、その関数でローカルファイルを読み込むことはできません。しかし、Webを閲覧すると、次のスレッドが示すように、javascriptではファイルシステムからファイルをロードするのが本当に難しいことがわかります。

javascriptを使用したローカルファイルアクセス

21
hequ

セキュリティ問題（同じOriginポリシー）により、ローカルファイルへのjavascriptアクセスは、ユーザーインタラクションなしの場合に制限されます。

https://developer.mozilla.org/en-US/docs/Same-Origin_policy_for_file:_URIs によると：

ファイルは、元のファイルの親ディレクトリがターゲットファイルの祖先ディレクトリである場合にのみ、別のファイルを読み取ることができます。

Webサイトからjavascriptがファイルを盗もうとする状況を想像してみてくださいあなたが気づかないうちにシステムのどこでも。 Webサーバーに展開する必要があります。または、スクリプトタグでロードしてみてください。このような：

<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>        
<script type="text/javascript" language="javascript" src="priorities.json"></script> 

<script type="text/javascript">
   $(document).ready(function(e) {
         alert(jsonObject.start.count);
   });
</script>

あなたのpriorities.jsonファイル：

var jsonObject = {
"start": {
    "count": "5",
    "title": "start",
    "priorities": [
        {
            "txt": "Work"
        },
        {
            "txt": "Time Sense"
        },
        {
            "txt": "Dicipline"
        },
        {
            "txt": "Confidence"
        },
        {
            "txt": "CrossFunctional"
        }
    ]
}
}

または、ページでコールバック関数を宣言し、jsonpテクニックのようにラップします。

<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js">    </script> 
     <script type="text/javascript">
           $(document).ready(function(e) {

           });

           function jsonCallback(jsonObject){
               alert(jsonObject.start.count);
           }
        </script>

 <script type="text/javascript" language="javascript" src="priorities.json"></script>

あなたのpriorities.jsonファイル：

jsonCallback({
    "start": {
        "count": "5",
        "title": "start",
        "priorities": [
            {
                "txt": "Work"
            },
            {
                "txt": "Time Sense"
            },
            {
                "txt": "Dicipline"
            },
            {
                "txt": "Confidence"
            },
            {
                "txt": "CrossFunctional"
            }
        ]
    }
    })

スクリプトタグの使用はJSONPに似た手法ですが、このアプローチではそれほど柔軟ではありません。 Webサーバーに展開することをお勧めします。

ユーザーとの対話により、javascriptはファイルへのアクセスを許可されます。 File API の場合です。ファイルAPIを使用すると、javascriptはファイルにアクセスできますユーザーが選択から<input type="file"/>またはデスクトップからブラウザにドロップします。

33
Khanh TO

JSONオブジェクトを変数として宣言するJavascriptファイルをHTMLに含めることができます。次に、たとえばdata.employeesを使用して、グローバルJavascriptスコープからJSONデータにアクセスできます。

index.html：

<html>
<head>
</head>
<body>
  <script src="data.js"></script>
</body>
</html>

data.js：

var data = {
  "start": {
    "count": "5",
    "title": "start",
    "priorities": [{
      "txt": "Work"
    }, {
      "txt": "Time Sense"
    }, {
      "txt": "Dicipline"
    }, {
      "txt": "Confidence"
    }, {
      "txt": "CrossFunctional"
    }]
  }
}
24
senornestor

app.js

$("button").click( function() {
 $.getJSON( "article.json", function(obj) {
  $.each(obj, function(key, value) {
         $("ul").append("<li>"+value.name+"'s age is : "+value.age+"</li>");
  });
 });
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tax Calulator</title>
    <script src="jquery-3.2.0.min.js" type="text/javascript"></script>
  </head>
  <body>
    <ul></ul>
    <button>Users</button>
<script type="text/javascript" src="app.js"></script>
  </body>
</html>

article.json

{
"a": {
"name": "Abra",
"age": 125,
"company": "Dabra"
},
"b": {
"name": "Tudak tudak",
"age": 228,
"company": "Dhidak dhidak"
}
}

server.js

var http = require('http');
var fs = require('fs');

function onRequest(request,response){
  if(request.method == 'GET' && request.url == '/') {
          response.writeHead(200,{"Content-Type":"text/html"});
          fs.createReadStream("./index.html").pipe(response);
  } else if(request.method == 'GET' && request.url == '/jquery-3.2.0.min.js') {
          response.writeHead(200,{"Content-Type":"text/javascript"});
          fs.createReadStream("./jquery-3.2.0.min.js").pipe(response);
  } else if(request.method == 'GET' && request.url == '/app.js') {
          response.writeHead(200,{"Content-Type":"text/javascript"});
          fs.createReadStream("./app.js").pipe(response);
  }
  else if(request.method == 'GET' && request.url == '/article.json') {
          response.writeHead(200,{"Content-Type":"text/json"});
          fs.createReadStream("./article.json").pipe(response);
  }
}

http.createServer(onRequest).listen(2341);
console.log("Server is running ....");

Server.jsは、ローカルで単純なノードhttpサーバーを実行してデータを処理します。

注フォルダー構造内のdd jQueryライブラリを忘れずに、server.jsでバージョン番号を適宜変更してくださいおよびindex.html

これは私の実行中のものです https://github.com/surya4/jquery-json 。

2
Surya Singh

ローカルマシンで複製しているd3.js視覚化の例..JSONデータをインポートします。すべてMozilla Firefoxブラウザーで正常に動作します。 Chromeで、クロスオリジン制限エラーが表示されます。ローカルjavascriptファイルのインポートに問題がないのは奇妙なことですが、JSONをロードしようとするとブラウザーが緊張します。少なくともユーザーがそれをオーバーライドできるようにするための設定、ポップアップがブロックされる方法があるはずですが、表示とそれらをブロック解除する選択肢が表示されます。ユーザーが自分に最適なものを知るにはあまりにも素朴であると扱われるべきではありません。

ローカルで作業している場合は、Firefoxブラウザーを使用することをお勧めします。そして、人々がこれに驚かないで、Mozillaを爆撃してlocal filesのクロスオリジン制限を強制することを望んでいます。

2
Nikhil VJ

オブジェクトを.txtファイルとして保存し、次のように取得しようとします。

 $.get('yourJsonFileAsString.txt', function(data) {
   console.log( $.parseJSON( data ) );
 });
0
amir