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

今回も引き続き、グループ毎のカテゴライズを試みた
前回のコメントを参考に、下記のコードをCountries.get()の内部に記述した。

var group = null;
that.group = [];
 if(element.itemName =[0]){
  "groupName" = element.groupName,
  "items" = []
 } else if (element.groupName = [n+1]){
  that.group.push(group)
  that.group =[];
 } else if (group = !null ){
  that.group.push(group)
 }
items.push({
  itemName:element.itemName,
  value:Math.round(element.value *100) /100 ,
  unit:element.unit,
  bgColor:bgColor
 })

まず、1行目でグループを定義し、2行目でそのグループを空配列とした。
次にif文を使い、3行目では検査項目名が最初のものであれば、groupNameにグループ名、検査データを流し込むitemsは空配列とする文章を定義する。
6行目では検査グループ名が変更された場合の条件文を記述したいのだが、どの様な記述をすれば良いのか分からなかった為、今回は適当な数値にした。条件文の内容としては、グループ名が変更された場合、グループ配列にグループを挿入し、かつグループ配列を空配列にするといった処理である。
9行目は同じく条件式で、groupが空でなければ、6行目と同様の処理を行うといったものである。
12行目は検査データを格納したitemsに検査項目名、検査値、値、背景色を追加する処理を行うといったものである。
これらのコードを記述した後確認を行ったのだが、「Error:Can't find variable: element」
と表示され、今回も思うようにプログラムの記述を行う事が出来なかった。

【コメント】

まず、エラーメッセージ「Error:Can't find variable: element」 ですが、これは「変数elementがみつかりません」という意味です。確かに、3行目でelementが初めて出てきますが、どこにも定義されていません。
検査結果は、変数 countries の list 属性の中に検査日ごとに入っていたことを思い出してください（以前のブログ記事「5.検査結果」の「#2 GET /dolphin/openSource/lab/module/00001,0,6 HTTP/1.1」）。したがって、直近の検査結果は変数 countries.list[0] の中にあり、その items 属性（配列）の配列要素が個々の検査項目結果（すなわち element）です。上記のプログラムにはこのitems配列の個々の要素elementに対するループ（繰り返し）がないのです。

したがって、プログラムは次のようになります。

// 直近の検査日の検査結果を変数 list に格納
var list = countries.list[0];
// 検査グループ配列を空配列に初期化
that.group = [];
// 個々の検査グループを格納するための一変数を　null で初期化
var group = null;
// 検査結果項目配列 list.items の個々の要素 element に対してループ処理
list.items.forEach(function(element){
  // elementが一番最初の検査結果項目の場合、groupを初期化する
  if(group == null) {
    group = {
      'groupName': element.groupName,
      'items': []
    };
  // 検査グループが変わったとき、groupを検査グループ配列に追加してからgroupを初期化する
  } else if(group.groupName != element.groupName){
    that.group.push(group);
    group = {
      'groupName': element.groupName,
      'items': []
    };
  }
  // 基準値を求めて normalValue 変数に格納する
  var normalValue = getNormalValueRange(element.normalValue);
  // 基準値と検査結果を比較して背景色を決める
  var backgroundColor = (element.value < normalValue.lower || element.value > normalValue.upper ? 'outliers' : 'normal');
  // グループに検査結果を追加する
  group.items.push(
    {
      'itemName': element.itemName,
      'value': round(element.value),  //  四捨五入
      'unit': element.unit,
      'backgroundColor': backgroundColor,
    }
  );
});
// 最後のgroupを検査グループ配列に追加する
if(group != null) {
  that.group.push(group);
}

ここで、24行目に出てくる getNormalValueRange 関数および31行目に出てくる round 関数は、それぞれ自作の基準値取得関数、四捨五入関数で、次のように定義しています。

/*
      基準値の下限と上限を求める
*/
function getNormalValueRange(normalValue) {
  var normalValue = normalValue.split(/-/);
  var lower = parseFloat(normalValue[0]);
  var upper = parseFloat(normalValue[1]);
  return {
    lower: lower,
    upper: upper,
  };  
}
 
/*
  四捨五入（小数第3位）
*/
function round(value) {
  return Math.round(value * 100) / 100;
}

これらの関数は、プログラムを見やすくするために定義したものです。必ずしも関数にしなければならないというものではありません。関数にしない場合はプログラム本体にそのまま書けばよいでしょう。