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

今回は前回のコメントで指摘された箇所を踏まえて階層化を試みたのだが、実現することが出来なかった。
まず、最初のコードに関してだが、これをcountries.listのthat.list.pushに記入されている書式に条件式として記入すればよいのでは
ないかと考え、まず、varを用いてgroupとbgColorの定義を行った後に、

that.list.push(
              {
                itemName:element.itemName,
                value:Math.round(element.value *100) /100 ,
                unit:element.unit,
                bgColor:bgColor
              }
            );

このコードを以下の様に書き換えた。

that.list.push(
              {group : [
                {
                groupName:"生化学的検査",
                   items: [
                itemName=element.itemName,
                value=Math.round(element.value *100) /100 ,
                unit=element.unit,
                bgColor=bgColor
                  ]}
              ]}

考え方としては、コメントの通りにリスト配列を挿入する際に、検査グループを定義し、
そこへ検査グループに属する検査項目を格納するといった階層構造の作成を試みたのだが、
この段階で表示することが出来れば、血液学的検査等の検査を同じように追加していく予定であったのだが、下記図1の様に何も表示されなくなってしまった。

図1 コードを書き換えた後のエラー

考えられる問題点として、コードの書き方を間違えているのではないかという事や、グループ分けを行っているといっても条件式等を指定しないため、結局の所全てのデータをそのまま流し込んでいるのではないか。
そもそもこのコードはcountries.list内に記載するべき記述なのであろうか。htmlのコメントに示されている「group.groupName」という記述から見ても、独立のコードとして定義するべきなのだろうか。
また、独立したコードとして定義するのであれば、直でデータを入力するわけにはいかないので、どの様にしてデータを取得すればよいのであろうか等様々な問題に直面してしまい、成果を上げることが出来なかった。

次回は今回直面した問題の解決と、停滞した分の遅れを取り戻せるように円滑に作業を行えるようにしたい。

---

【コメント】

前回のコメントに書いた検査データの階層構造を格納するgroupオブジェクトは、あくまでも加工後のイメージであって、あれをそのままコーディングするわけではありません。加工後のgroupオブジェクトが意図したとおりになっているかどうかはJSON.stringifyしたものをalertして確認するとよいでしょう。

さて、どのようにしてgroupオブジェクトを作成するか、疑似コードで示しましょう。

CountriesControllerのgroup属性を空配列で初期化する。
group要素を定義してnullで初期化する。
list.itemsに格納された個々の検査項目に対して、以下の処理を繰り返す。
  もし、先頭の検査項目なら
    group要素を、2つの属性「グループ名称」と「検査項目を格納する空の配列」を持つ連想配列で初期化する。
  そうでなくて、検査項目のグループ名称が変わったら
    group要素をCountriesControllerのgroup属性に追加する
    group要素を、2つの属性「グループ名称」と「検査項目を格納する空の配列」を持つ連想配列で初期化する。
  group要素の検査項目配列に検査項目情報（「検査項目名」「検査結果」「単位」「背景色」）を追加する
もしgroup要素がnullでなければgroup要素をCountriesControllerのgroup属性に追加する

この疑似コードで1行目のCountriesControllerのgroup属性というのは、that.listに代わるものです。例えば、that.groupといった変数名を付けておくのが良いでしょう。

2行目のgroup要素は、that.groupに挿入する要素を表すローカル変数です。list.itemsに入っている検査データをもとに作っていきます。 例えば

var group = null;

などと定義すればよいでしょう。ここで、nullというのは、オブジェクトの中身が空であることを示す特別な値です。

次いで、3行目から9行目まで、検査データの個々の検査項目について、検査項目がなくなるまで繰り返し処理を行います。

まず、初めての検査項目の場合、最初の検査グループ要素groupを作成します。それが5行目の処理です。「グループ名称」のキーをgroupName、「検査項目を格納する配列」のキーをitemsとした場合、次のようなコードになるでしょう。

group = {
  'groupName': element.groupName,
  'items': []
}

ここで、elementはlist.itemsに格納された個々の検査項目を表す変数名です。

次に 、検査グループ名称が変わった場合（6行目）、groupをthat.groupに追加（7行目）したのちに、先ほどと同様に検査グループ要素groupを作成（初期化）します。

分かりにくかったかもしれませんが、以上が階層構造のうちgroup階層を作成する部分です。検査項目ループ処理で、「検査グループ名称が変わったとき」というイベントをトラップして、新しい検査グループ要素を作成しています。

9行目は検査項目の設定部分です。これは従来のプログラムと同じことをやっています。ただし、検査項目を追加する配列はthat.listではなくgroup.itemsになっている点が違います。group.itemsはグループ要素の下層にある要素なので、上位層が検査グループ、下位層が検査項目という階層構造ができるわけです。

最後の10行目は、最後の検査グループ要素groupをthat.groupに追加するコードです。検査データの全ての検査項目の処理を終えたあと（3行目～9行目のループを抜けたあと）、検査グループ要素groupにはデータが残っているかもしれません（いえ、検査データが1つでもあれば必ず残っているはずです）。それを拾い上げているのがこのコードです。

このように、ある項目（今の場合は検査グループ名）をキー項目として、それが変わると何かある処理を行う（この場合は、検査グループ要素を配列の追加して、検査グループ要素を初期化する）ことを「コントロールブレイク処理」と言います。様々なアルゴリズムがありますが、ここで紹介したアルゴリズムは最もポピュラーなものです。