④検査結果表示について7

今回は、前回作成した日付のコンボボックスを変更した場合、対応した検査データのリストを表示するといった処理を行う。
考え方としては、that.sampleDateとthat.listの各検査のsampleDateが等しいときに対応した検査データを抽出してlistへ代入するといった感じだ。
この考え方であれば、createGroupの中で動作を行う方が好ましいので、先にCountries.get()内に記述されている検査項目を作成する
var list = countries.list[0]
that createGroup(list);

上記のプログラムの赤字部分を削除する。次に実際にcreateGroupの中へ記述を行っていく。

this.createGroup = function(list){
        var list = [];
        that.list.forEach(function(element){
          if(that.sampleDate == element.sampleDate){
            list = element;
          }
        });
 :
 :
 中略
 :
 :
});

まず2行目でlistの定義並びに配列を空にしている。これは一度しか参照しないlistの値を初期化する為である。
3～7行目は条件式の記述である。もし、that.sampleDateとelement.sampleDateが同じであれば、listへ各項目を代入するといった処理である。
次に、that.listが変更された場合にこのプログラムが実行されるように、that.listを監視している$scope.$wacthの内部へ以下の様な記述を行う。

$scope.$watch('countries.sampleDate', function() {
          that.createGroup();
    }

上記のプログラムは、countries.sampleDateの値が動いた場合、that.createGroupを実行するといったプログラムである。

これらの処理を行った後、アプリケーションの方で確認を行うと、
検査項目リスト自体は日付を変更すると対応したリストで作成するといった想定した動作を行ったのだが、「that.sampleDate undefined that.list.forEach」というエラーメッセージが表示されていた。
考えられる原因のひとつとして、前回記述したデフォルト値の設定である

that.sampleDate=that.sampleDateList[0];

の位置が悪いのではないだろうかという事で、countriesget内で移動をさせたのだが、改善は見られなかった。
次に、countries.getとcreateGroup内でalertを発生させ、処理の順番がどの様になっているのかを確認した。
countries.getでは「代入しました」、createGroup内では「createGroupに入りました　SampleDate値」をアラートさせた。

図1 アラート結果

アラート結果を見ると、上記図1のような流れになっていた。まずはじめにcreateGroupが実行されsampleDate値は空、2番目にcountries.getが実行、
3、4番目に再びcreateGroupが実行されており、sampleDate値は直近の物になっていた。

どうやらcountries.getよりも先にcreateGroupが実行されている為、この様なエラーメッセージが表示されているのだろう。
解決策として、sampleDateの値が空である場合はcreateGroupを実行させないといった処理を行えば良いのではないだろうか。
そこで、$scope.$watch内の記述を以下の様に書き換える。

$scope.$watch('countries.sampleDate', function() {
    if(that.sampleDate){
      that.createGroup();
    }

この条件式は、「that.sampleDateに値があるならば、that.createGroupを実行する」といった条件式である。
上記の記述を行った後、確認を行うとcountries.getから先に実行され、先ほどのエラーメッセージが表示されることはなくなった。
が、アラートからもわかるようになぜか二回createGroupの呼び出しを行っていることがわかる。これはcountries.get内でもthat.creatGroupの呼び出しを行っている為である。
$scope.$watch上で実行している以上無意味な記述であるため、削除を行った。

図2 5/6の検査結果リスト

図3 5/5の検査リスト

これらの処理を行った後確認をすると、上記図2,3の様に日付を変更するたびに対応したデータの表示を行う事に成功した。

次回は関連した検査データごとのレーダーチャートの作成を目指したい。