web-dev-qa-db-ja.com

JavaScriptからscript-tagのJSONを読み取るにはどうすればよいですか？

静的なJavaScriptを使用し、パラメーターとしてJSON文字列を渡す動的に生成されたページがあります。 Googleでこのアプローチが使用されているのを見てきました（ Googleの+1ボタン：どうやってそれを行うのですか？ を参照）。

しかし、JavaScriptからJSON文字列をどのように読み取る必要がありますか？

<html>
  <head>
    <script src="jquery-1.6.2.min.js"></script>
    <script src="myscript.js">{"org": 10, "items":["one","two"]}</script>
  </head>
  <body>
    Hello
  </body>
</html>

このJavaScriptでは、HTMLドキュメントのJSON引数{"org": 10, "items":["one","two"]}を使用します。 jQueryを使用するか使用しないかがわかりません。

$(function() {
    // read JSON

    alert("the json is:")
})
javascriptjsonscript-tag
69
Jonas

スクリプト宣言を次のように変更します。

<script id="data" type="application/json">{"org": 10, "items":["one","two"]}</script>

タイプフィールドとIDフィールドに注意してください。その後

var data = JSON.parse(document.getElementById('data').innerHTML);

すべてのブラウザで問題なく動作します。

type="application/json"は、ブラウザが読み込み中に解析するのを防ぐために必要です。

134
c-smile

私はこのJavaScriptコードがjQueryから独立することになりました。

var json = document.getElementsByTagName('script');
var myObject = JSON.parse(json[json.length-1].textContent);
13
Jonas

<script id="myJSON">でJSONを読み取るには

var manifest= document.getElementById('myJSON').innerHTML; //sets manifest to the text in #myJSON
manifest= JSON.parse(manifest) //Converts text into JSON

メソッドを使用して、document.scripts[0]などのスクリプトを指すこともできます。

    //var manifest= JSON.parse(document.getElementById('myJSON').innerHTML); /*Shortend of 2&3*/
var manifest= document.getElementById('myJSON').innerHTML; //Gets text in #myJSON
manifest= JSON.parse(manifest) //Converts it into JSON
document.getElementById('test').innerHTML= manifest.name+ '<br/>'+ manifest.otherOptions; //Displays it
console.log('manifest')
console.log(manifest);
<head>
<script type="application/json" id="myJSON">
  {"name":"Web Starter Kit", "otherOptions":"directly here"}
</script>
</head>
<body>
<p id="test"></p>
</body>
2
Zekrom_Vale
_JSON.parse($('script[src="mysript.js"]').html());
_

または、スクリプトを識別する他の方法を発明します。

.html()の代わりに.text()が必要な場合があります。わからない。両方試してください。

1
Emil Ivanov