Q&A
プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。
前提・実現したいこと
ご回答いただいた皆様には申し訳ございませんが、本件ReOpenさせてください。
ご回答いただいた、mts10806様、yambejp様 有難うございました。
本件、再度本文に記載させていただきます。
以下、「試したこと」の欄に継続して記載させていただきます。
HTMLとJavaScriptとを用いて
”ローカル”にある複数の任意の外部スクリプトに定義してある連想配列データ(WeeklyData.js）をHTML上で選択取込みし、その後、
その取込んだデータを、別名で定義したグローバル変数として現ページ上で保持し、
様々な演算処理に利用したいと考えております。
発生している問題・エラーメッセージ
jQueryの$.getScriptを利用して外部スクリプトであるWeeklyData.jsの
取込み処理を行った後、内部スクリプトにて新たに定義したグローバル変数に
代入しようとするも、外部データが取り込まれる前に代入処理がおこなわれているのか
undefinedとエラーとなってしまいます。
該当のソースコード
先ず外部データであるWeeklyData.jsの中身ですが、以下の様に単純に連想配列データを記載したものです。
Javascript
1var data1 =[ 2 { Period : "Apr1-7", 3 DataID : "ID0001", 4 val1 : 10, 5 val2 : 15, 6 val3 :20, 7 val4 : 25, 8 val5 : 30, 9 } 10 ]; 11var data2 =[ 12 { Period : "Apr1-7", 13 DataID : "ID0002", 14 val1 : 0, 15 val2 : 5, 16 val3 : 10, 17 val4 : 15, 18 val5 : 30, 19 }
上記の様なデータが多数続きます。仮にここでは１０個の配列データとします。
次に上記のデータを取込み、別名のグローバル変数として再定義する為に
以下のようにgetScriptを用いて、取込み完了後にfoo()という関数で
別のグローバル変数へ代入する方法を試みました
HTML
1<html> 2<header> 3 <!-- JQuery DL --> 4 <script src ="../jQuery/jquery-3.3.1.min.js"></script> 5 6 <script> 7 // Grobal variavle assignment 8 for(var i=1; i<=10; i++){ 9 eval("var W1" + i +"data = []");//別名グローバル変数を準備 10 } 11 </script> 12 13 <script> 14 //準備した別名グローバル変数に取込んだデータを代入する関数foo()を用意 15 var foo1 = function(){ 16 for(var j = 1; j<= 10; j++){ 17 eval("W1" + j +"data =" + "data" + j); 18 } 19 } 20 var foo2 = function(){ 21 for(var j = 1; j<= 10; j++){ 22 eval("W2" + j +"data =" + "data" + j); 23 } 24 } 25 </script> 26 27 <script> 28 // 外部データを取込んだあと別名で定義したグローバル変数に代入する処理 29 $.getScript("../2018/Apr/Week1/WeeklyData.js",function(){foo1()}); 30 </script> 31 <script> 32 // 別フォルダに存在する同名のWeeklyData.jsを上記と同様に行う処理 33 $.getScript("../2018/Apr/Week2/WeeklyData.js",function(){foo2()}); 34 </script> 35</header> 36<body> 37 ---- 38 ---- 39</body> 40</html>
試したこと
yambejp様からご回答いただいた以下の内容でChromeでは
起動オプション「--allow-file-access-from-file」を追加することで、
ローカルにあるScriptを読み込むことができたのですが、IE11で確認すると
読み込めない状況でした、
Javascript
1$(function(){ 2 $.when( 3 $.getScript("../2018/Apr/Week1/WeeklyData.js",function(){foo1()}), 4 $.getScript("../2018/Apr/Week2/WeeklyData.js",function(){foo2()}) 5 ).done(function(){ 6 console.log(W11data); 7 console.log(W21data); 8 }); 9});
そこで、調べてみたところ、jQueryの読み込みの後に、以下様にすれば
IE11でも読めるとありましたので、試してみましたが、
「WeeklyData.js」を開きますか？という表示が出力され、やはり
取込むことができませんでした。
Javascript
1 <script src ="../jQuery/jquery-3.3.1.min.js"></script> 2 <script> 3 //$.ajaxSetup({cache: false}); 4 $.ajaxSetup({ 5 xhr: function() { 6 if("ActiveXObject" in window) { 7 return new ActiveXObject("Microsoft.XMLHTTP"); 8 } 9 else { 10 return new XMLHttpRequest(); 11 } 12 } 13 }); 14 </script>
jQueryを使わない手段、もしくは使用してもIE11でローカルにある
外部スクリプトを取込める手段、ご教示いただければ幸いです。
以上、どうぞよろしくお願い致します。
１）Chromeブラウザにて、
$.getScript("../2018/Apr/Week1/WeeklyData.js",function(){foo1()});
でブレークをかけて、ステップ実行すると、取込める場合があるのですが、
通常に処理を実施すると、data1 undefinedとエラーになり
あたかもWeeklyData.js内の連想配列データが取り込まれる前にfoo()が実施された
ような動きになってしまいます。
また、
２）jQueryを用いずに
Javascript
1 <script> 2 var script = document.createElement('script'); 3 script.src = 'WeeklyData.js'; 4 document.head[0].appendChild(script); 5 </script>
で外部データを読み込み、その後にfoo1()を実施するなども試みましたが
やはりダメでした。
補足情報（FW/ツールのバージョンなど）
現状、ChromeとIE11で確認していますが、双方ともにうまく動作できない状態です。
かれこれ一週間ほどてこずっており、悩んでおります。
どなたかご教示いただければ、幸いです。
以上、どうぞよろしくお願いいたします。
回答3件
0
非同期の処理だからでは？
javascript
1$(function(){ 2 $.when( 3 $.getScript("../2018/Apr/Week1/WeeklyData.js",function(){foo1()}), 4 $.getScript("../2018/Apr/Week2/WeeklyData.js",function(){foo2()}) 5 ).done(function(){ 6 console.log(W11data); 7 console.log(W21data); 8 }); 9});
投稿2018/05/07 04:13
総合スコア114839
ご回答いただきありがとうございます。大変助かります
ご提案いただいた
「配列はJSON形式で出し入れすることとなります」
に関しては、現状Weeklydata.jsの様に、Javascriptのオブジェクトとして
記載した形になっておりますが、ここも書き直す必要があるということに
なるのでしょうか？
```
var data = localStorage.getItem('../2018/Apr/Week1/HR_Site_Data.js');
data = JSON.parse(data);
```
としてみましたが、dataがnullでインポートできていない状態でしたもので
理解不足で大変申し訳ございません。
以上、どうぞよろしくお願いいたします。
ご回答どうもありがとうございます。
大変失礼いたしました。
コメントを返す場所をまちがえていたようです。
ご提案いただいた内容、確認してみます。
先ずはお詫びとお礼まで
先ほどは大変失礼いたしました。早速ご提案の内容を確認してみました。
結果としては、無事グローバル変数として定義されていることが確認できました。大変助かりました。
同様にして、別ファイルの取込みについても、対応してみたいと
思います。
重ねてお礼申し上げます。有難うございました
0
投稿2018/05/07 03:39
編集2018/05/07 03:44総合スコア80850
ご回答いただきありがとうございます。大変助かります
ご提案いただいた
「配列はJSON形式で出し入れすることとなります」
に関しては、現状Weeklydata.jsの様に、Javascriptのオブジェクトとして
記載した形になっておりますが、ここも書き直す必要があるということに
なるのでしょうか？
```
var data = localStorage.getItem('../2018/Apr/Week1/HR_Site_Data.js');
data = JSON.parse(data);
```
としてみましたが、dataがnullでインポートできていない状態でしたもので
理解不足で大変申し訳ございません。
以上、どうぞよろしくお願いいたします。
HR_Site_Data.jsというファイルがいきなり出てきていますが、これは？
いずれにしてもWebStorageにおさめられるのは文字列だけです。
getItem()の引数はキーなのでそのような指定はできません。
var data1 =[
{ Period : "Apr1-7",
DataID : "ID0001",
val1 : 10,
val2 : 15,
val3 :20,
val4 : 25,
val5 : 30,
}
];
localStorage.setItem('data1', JSON.stringify(data1 ));
とすることでdata1というキーに情報が保管されます。
取り出すときは下記のようにします。
var data1 = localStorage.getItem('data1');
data1= JSON.parse(data1);
迅速なご回答どうも有難うございます。
HR_Site_Data.jsはまた異なる外部スクリプトを誤記してしまったものですので申しわけございませんが、無視してくださって結構です。
上記、ご丁寧な説明いただき有難うございます。
チャレンジしてみます。
「データの共有」という意味だと、あまりちょこちょこjsファイルを読み込むのは良くないかなと。
getScript()するのではなく<script>でいちいち読み込んでおいた方が良いです。
全く、おっしゃる通りです。ご指摘ありがとうございます。
今回のケースでは、データ仕様がFIXしない状態で、かつ散在しているため
このようなみっともない形になっております。今後はデータを1元化する
方向で検討したいと思います。
大変たすかりました。お礼申し上げます。
なるほど。設計段階からの見直しが必要と言うことですね。
とりあえずモック作っておくような状態ではよくありそうなことです・・。
ひとまず解決したようで何よりです。
0
自己解決
結局、外部スクリプトをHTMLから動的にsrcを設定して
取込むことは、内部に与える影響も大きそうなので、
<!-- Week1データ読み込みと内部Grobal変数化 --> <script src="2018/Week1/Weeklydata.js></script> <script> assigngrobalvar("W1")； </script> <!-- Week2データ読み込みと内部Grobal変数化 --> <script scr="2018/Week2/Weeklydata.js></script> <script> assign grobalvar("W2"); </script>
と、取込みするデータが増える度に、記載も増えてしまいますが、
素直にスタティックに取り込むことで対応することにしました。
今後、ゆっくり考えてみます。
ご助言いただいた皆様、どうも有難うございました。
投稿2018/05/10 08:24
総合スコア37
あなたの回答
tips
プレビュー
