web-dev-qa-db-ja.com

JSONデータを解析せずにJavaScriptに同期的に含める方法


配列を含むJSONファイルを自分のサーバーからjavascriptオブジェクト変数にロードしたい。
ページの読み込み中にデータが必要になるため、ページの読み込みの開始時に同期的に実行したいと思います。

私はなんとかjQuery.getJSONを使用しましたが、これは非同期ajaxであり、少しやり過ぎのようです。

独自の解析を行わずに、JSONを同期してロードする方法はありますか？
（多かれ少なかれ<script language="JavaScript" src="MyArray.json"></script>）

助けてくれてありがとう、私がjavascript初心者であるので、それが理にかなっていることを願っています。パオロ

javascriptjsonparsinggetjsonsynchronous
29
Paull

getJSON()は、単に_dataType:'json'_が設定されたajax()関数の省略形です。 ajax()関数を使用すると、リクエストに関する多くのことをカスタマイズできます。

_$.ajax({
  url: 'MyArray.json',
  async: false,
  dataType: 'json',
  success: function (response) {
    // do stuff with response.
  }
});
_

まだ_async:false_でコールバックを使用していますが、ajax呼び出しから実行が継続する前にコールバックが起動します。

35
Alex Wayne

どうぞ：

// Load JSON text from server hosted file and return JSON parsed object
function loadJSON(filePath) {
  // Load json file;
  var json = loadTextFileAjaxSync(filePath, "application/json");
  // Parse json
  return JSON.parse(json);
}   

// Load text with Ajax synchronously: takes path to file and optional MIME type
function loadTextFileAjaxSync(filePath, mimeType)
{
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.open("GET",filePath,false);
  if (mimeType != null) {
    if (xmlhttp.overrideMimeType) {
      xmlhttp.overrideMimeType(mimeType);
    }
  }
  xmlhttp.send();
  if (xmlhttp.status==200)
  {
    return xmlhttp.responseText;
  }
  else {
    // TODO Throw exception
    return null;
  }
}

注：このコードは、IE8、FF、Chrome、Opera、Safariなどの最新のブラウザーでのみ機能します。 obosoleteの場合IEバージョンはActiveXを使用する必要があります。必要であれば、その方法を説明します。）

14
Boris Hamanov

何らかのサーバースクリプトを使用している場合は、ページ上のスクリプトタグにデータを印刷できます。

<script type="text/javascript">
var settings = <?php echo $json; ?>;
</script>

これにより、AJAXを非同期で使用するのではなく、データを同期的に使用できます。

それ以外の場合は、AJAXコールバックを待ってから、実行中の処理を続行する必要があります。

4
zzzzBov

Json形式で提供される小さな入力ファイルを読み取り、少量のデータを抽出するだけで済みました。これは状況でうまくいきました：

jsonファイルはスクリプトと同じディレクトリにあり、data.jsonと呼ばれ、次のようになります。

{"outlets":[
        {
            "name":"John Smith",
            "address":"some street, some town",
            "type":"restaurant"
        },
..etc...

次のようにデータをjsに読み込みます：

var data = <?php echo require_once('data.json'); ?>;

次のようなデータ項目にアクセスします。

for (var i in data.outlets) {    
var name = data.outlets[i].name;
... do some other stuff...
}
1
user2091857

RequireJSがオプションの場合、requirejsを使用して依存関係にすることができます。これを使用して、Angularアプリケーションでデータをモックします。モックされたデータの一部は、アプリのbootstrapの前にあることが重要です。

//Inside file my/shirt.js:
define({
    color: "black",
    size: "unisize"
});

JSONデータを定義でラップし、依存関係として宣言するだけです。詳細はこちら： http://requirejs.org/docs/api.html#defsimple

0
smets.kevin