質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.85%

  • JavaScript

    14282questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

外部スクリプトに定義してある連想配列データを別名のグローバル変数として内部保持したい。

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 95

Yasu0421

score 3

 前提・実現したいこと

ご回答いただいた皆様には申し訳ございませんが、本件ReOpenさせてください。
ご回答いただいた、mts10806様、yambejp様 有難うございました。
本件、再度本文に記載させていただきます。

以下、「試したこと」の欄に継続して記載させていただきます。

HTMLとJavaScriptとを用いて
”ローカル”にある複数の任意の外部スクリプトに定義してある連想配列データ(WeeklyData.js)をHTML上で選択取込みし、その後、
その取込んだデータを、別名で定義したグローバル変数として現ページ上で保持し、
様々な演算処理に利用したいと考えております。

 発生している問題・エラーメッセージ

jQueryの$.getScriptを利用して外部スクリプトであるWeeklyData.jsの
取込み処理を行った後、内部スクリプトにて新たに定義したグローバル変数に
代入しようとするも、外部データが取り込まれる前に代入処理がおこなわれているのか
undefinedとエラーとなってしまいます。
 

 該当のソースコード

先ず外部データであるWeeklyData.jsの中身ですが、以下の様に単純に連想配列データを記載したものです。

var data1 =[                             
  { Period : "Apr1-7", 
    DataID : "ID0001",
    val1 : 10,
    val2 : 15,
    val3  :20,
    val4 : 25,
    val5 : 30,
  }
 ];
var data2 =[                             
  { Period : "Apr1-7", 
    DataID : "ID0002",
    val1 : 0,
    val2 : 5,
    val3  : 10,
    val4 : 15,
    val5 : 30,
  }

上記の様なデータが多数続きます。仮にここでは10個の配列データとします。

次に上記のデータを取込み、別名のグローバル変数として再定義する為に
以下のようにgetScriptを用いて、取込み完了後にfoo()という関数で
別のグローバル変数へ代入する方法を試みました

<html>
<header>
 <!-- JQuery DL -->
 <script src ="../jQuery/jquery-3.3.1.min.js"></script>

  <script>
    // Grobal variavle assignment
    for(var i=1; i<=10; i++){
      eval("var W1" + i +"data = []");//別名グローバル変数を準備
    }
  </script>

  <script>
    //準備した別名グローバル変数に取込んだデータを代入する関数foo()を用意
    var foo1 = function(){
      for(var j = 1; j<= 10; j++){
        eval("W1" + j +"data =" + "data" + j);
      }
    }
    var foo2 = function(){
      for(var j = 1; j<= 10; j++){
        eval("W2" + j +"data =" + "data" + j);
      }
    }
  </script>

  <script> 
    // 外部データを取込んだあと別名で定義したグローバル変数に代入する処理
  $.getScript("../2018/Apr/Week1/WeeklyData.js",function(){foo1()});
  </script>
  <script> 
    // 別フォルダに存在する同名のWeeklyData.jsを上記と同様に行う処理
  $.getScript("../2018/Apr/Week2/WeeklyData.js",function(){foo2()});
  </script>
</header>
<body>
 ----
 ----
</body>
</html>

 試したこと

yambejp様からご回答いただいた以下の内容でChromeでは
起動オプション「--allow-file-access-from-file」を追加することで、
ローカルにあるScriptを読み込むことができたのですが、IE11で確認すると
読み込めない状況でした、

$(function(){
  $.when(
    $.getScript("../2018/Apr/Week1/WeeklyData.js",function(){foo1()}),
    $.getScript("../2018/Apr/Week2/WeeklyData.js",function(){foo2()})
    ).done(function(){
      console.log(W11data);
      console.log(W21data);
  });
});


そこで、調べてみたところ、jQueryの読み込みの後に、以下様にすれば
IE11でも読めるとありましたので、試してみましたが、
「WeeklyData.js」を開きますか?という表示が出力され、やはり
取込むことができませんでした。

  <script src ="../jQuery/jquery-3.3.1.min.js"></script>
  <script>
    //$.ajaxSetup({cache: false});
     $.ajaxSetup({
      xhr: function() {
        if("ActiveXObject" in window) {
          return new ActiveXObject("Microsoft.XMLHTTP");
        }
        else {
          return new XMLHttpRequest();
        }
      }
    });
  </script>


jQueryを使わない手段、もしくは使用してもIE11でローカルにある
外部スクリプトを取込める手段、ご教示いただければ幸いです。
以上、どうぞよろしくお願い致します。

1)Chromeブラウザにて、  
$.getScript("../2018/Apr/Week1/WeeklyData.js",function(){foo1()});
でブレークをかけて、ステップ実行すると、取込める場合があるのですが、
通常に処理を実施すると、data1 undefinedとエラーになり
あたかもWeeklyData.js内の連想配列データが取り込まれる前にfoo()が実施された
ような動きになってしまいます。
また、
2)jQueryを用いずに

     <script>
        var script = document.createElement('script');
        script.src = 'WeeklyData.js';
        document.head[0].appendChild(script);
     </script>


で外部データを読み込み、その後にfoo1()を実施するなども試みましたが
やはりダメでした。

 補足情報(FW/ツールのバージョンなど)

現状、ChromeとIE11で確認していますが、双方ともにうまく動作できない状態です。
かれこれ一週間ほどてこずっており、悩んでおります。
どなたかご教示いただければ、幸いです。
以上、どうぞよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/05/07 12:34

    プログラムコード(およびエラーメッセージ)は```で囲ってください。(わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください)正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

    キャンセル

  • Yasu0421

    2018/05/07 12:44

    ご指摘ありがとうございます。大変助かりました。

    キャンセル

回答 3

+1

WebStorageを利用されては?

配列はJSON形式で出し入れすることとなります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/07 13:36

    ご回答いただきありがとうございます。大変助かります
    ご提案いただいた
    「配列はJSON形式で出し入れすることとなります」
    に関しては、現状Weeklydata.jsの様に、Javascriptのオブジェクトとして
    記載した形になっておりますが、ここも書き直す必要があるということに
    なるのでしょうか?
    ```
    var data = localStorage.getItem('../2018/Apr/Week1/HR_Site_Data.js');
    data = JSON.parse(data);
    ```
    としてみましたが、dataがnullでインポートできていない状態でしたもので
    理解不足で大変申し訳ございません。
    以上、どうぞよろしくお願いいたします。

    キャンセル

  • 2018/05/07 13:44 編集

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

    キャンセル

  • 2018/05/07 13:56

    迅速なご回答どうも有難うございます。
    HR_Site_Data.jsはまた異なる外部スクリプトを誤記してしまったものですので申しわけございませんが、無視してくださって結構です。
    上記、ご丁寧な説明いただき有難うございます。
    チャレンジしてみます。

    キャンセル

  • 2018/05/07 14:02

    「データの共有」という意味だと、あまりちょこちょこjsファイルを読み込むのは良くないかなと。
    getScript()するのではなく<script>でいちいち読み込んでおいた方が良いです。

    キャンセル

  • 2018/05/07 14:10

    全く、おっしゃる通りです。ご指摘ありがとうございます。
    今回のケースでは、データ仕様がFIXしない状態で、かつ散在しているため
    このようなみっともない形になっております。今後はデータを1元化する
    方向で検討したいと思います。
    大変たすかりました。お礼申し上げます。

    キャンセル

  • 2018/05/07 14:11

    なるほど。設計段階からの見直しが必要と言うことですね。
    とりあえずモック作っておくような状態ではよくありそうなことです・・。
    ひとまず解決したようで何よりです。

    キャンセル

+1

非同期の処理だからでは?

$(function(){
  $.when(
    $.getScript("../2018/Apr/Week1/WeeklyData.js",function(){foo1()}),
    $.getScript("../2018/Apr/Week2/WeeklyData.js",function(){foo2()})
    ).done(function(){
      console.log(W11data);
      console.log(W21data);
  });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/07 13:25

    ご回答いただきありがとうございます。大変助かります
    ご提案いただいた
    「配列はJSON形式で出し入れすることとなります」
    に関しては、現状Weeklydata.jsの様に、Javascriptのオブジェクトとして
    記載した形になっておりますが、ここも書き直す必要があるということに
    なるのでしょうか?
    ```
    var data = localStorage.getItem('../2018/Apr/Week1/HR_Site_Data.js');
    data = JSON.parse(data);
    ```
    としてみましたが、dataがnullでインポートできていない状態でしたもので
    理解不足で大変申し訳ございません。
    以上、どうぞよろしくお願いいたします。

    キャンセル

  • 2018/05/07 13:36

    ご回答どうもありがとうございます。

    大変失礼いたしました。
    コメントを返す場所をまちがえていたようです。
    ご提案いただいた内容、確認してみます。
    先ずはお詫びとお礼まで

    キャンセル

  • 2018/05/07 14:07

    先ほどは大変失礼いたしました。早速ご提案の内容を確認してみました。
    結果としては、無事グローバル変数として定義されていることが確認できました。大変助かりました。
    同様にして、別ファイルの取込みについても、対応してみたいと
    思います。
    重ねてお礼申し上げます。有難うございました

    キャンセル

check解決した方法

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>

と、取込みするデータが増える度に、記載も増えてしまいますが、
素直にスタティックに取り込むことで対応することにしました。

今後、ゆっくり考えてみます。
ご助言いただいた皆様、どうも有難うございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.85%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    14282questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。